可以将这段困扰我的代码赋给一个变量吗?

nwsw7zdq  于 2022-10-02  发布在  Java
关注(0)|答案(4)|浏览(245)

如果这是一个愚蠢的问题,我很抱歉,但我才刚刚开始学习JavaScipt(和一般编程),我正在努力掌握一些代码。

我尝试使用if/Else语句来验证按钮的值是否不同于一组确定的按钮。下面是有问题的代码:

const listaDeTeclas = document.querySelectorAll('.tecla');
const teclaSoma = document.querySelector('.operacao_soma');
const teclaSubt = document.querySelector('.operacao_subtrai');
const teclaMult = document.querySelector('.operacao_multiplica');
const teclaDivi = document.querySelector('.operacao_divide');

for (let i = 0; i < listaDeTeclas.length; i++) {
    let tecla = listaDeTeclas[i];
    let valor = tecla.innerHTML;

    tecla.onclick = function () {
        if (valor != teclaSoma.innerHTML && valor != teclaSubt.innerHTML && valor != teclaMult.innerHTML && valor != teclaDivi.innerHTML) {
            calcDisplay.innerHTML += valor;
        } else if (valor == teclaSoma.innerHTML || valor == teclaSubt.innerHTML || valor == teclaMult.innerHTML || valor == teclaDivi.innerHTML) {
            console.log('it works!');    
        }
    }
}

它可能看起来很糟糕,但最让我困扰的是valor == teclaSoma.innerHTML || valor == teclaSubt.innerHTML || valor == teclaMult.innerHTML || valor == teclaDivi.innerHTML位。有没有办法将此行存储在变量中,以便if/Else语句看起来如下所示?

if (valor != theVariableIDontKnowHowToMake) {
  calcDisplay.innerHTML += valor;
} else if (valor == theVariableIDontKnowHowToMake) {
  console.log('it works!');
}

代码按原样工作,但在我看来,它看起来丑陋

qij5mzcb

qij5mzcb1#

不是比较文本,而是为所有运算符提供operacao类,和/或为所有数字提供digito类。然后,您可以直接check for其中任何一个:

const listaDeTeclas = document.querySelectorAll('.tecla');

for (let tecla of listaDeTeclas) {
    tecla.onclick = () => {
        if (tecla.classList.contains('digito')) {
            calcDisplay.append(tecla.textContent);
        } else {
            console.log('it works!');    
        }
    };
}

此时,您甚至可能不希望不同类型的按钮共享一个事件处理程序:

const teclaSoma = document.querySelector('.operacao_soma');
const teclaSubt = document.querySelector('.operacao_subtrai');
const teclaMult = document.querySelector('.operacao_multiplica');
const teclaDivi = document.querySelector('.operacao_divide');
const digitos = document.querySelectorAll('.digito');

for (let digito of digitos) {
    digito.onclick = () => {
        calcDisplay.append(digito.textContent);
    };
}

teclaSoma.onclick = () => {
    console.log('TODO: perform +');
};

// etc.
dfuffjeb

dfuffjeb2#

有没有办法将这一行具体存储在变量中?

是的,它很简单,例如:

const isOperator = valor === teclaSoma.innerHTML || valor === teclaSubt.innerHTML ||
  valor === teclaMult.innerHTML || valor === teclaDivi.innerHTML;

if (isOperator) {
  console.log('it works!');
} else {
  calcDisplay.innerHTML += valor;
}
1mrurvl1

1mrurvl13#

当然:

if ([
  teclaSoma.innerHTML,
  teclaSubt.innerHTML,
  teclaMult.innerHTML,
  teclaDivi.innerHTML
].includes(value)) {
  // stuff
} else {
  // stuff
}

使用数组和includes可以大大简化代码。

此外,不需要执行类似于if (x) { } else if (!x) { }的操作,因为您只需执行if (x) { } else { }即可。

您可以通过mapping元素的HTML来使代码变得更短:

if ([teclaSoma, teclaSubt, teclaMult, teclaDivi].map(e => e.innerHTML).includes(value)

...或者,您可以将mapincludes组合为对some的调用(它检查数组中的一些元素是否匹配条件):

if ([teclaSoma, teclaSubt, teclaMult, teclaDivi].some(e => e.innerHTML === value))
lfapxunr

lfapxunr4#

这里没有什么难看的东西!

当然,您可以这样做:

const condition1 = () => {return (valor != teclaSoma.innerHTML &&valor != teclaSubt.innerHTML && valor != teclaMult.innerHTML && valor != teclaDivi.innerHTML) 
 };
 const condition2 = () => {return (valor == teclaSoma.innerHTML || valor == teclaSubt.innerHTML || valor == teclaMult.innerHTML || valor == teclaDivi.innerHTML)
 };

所以,事情会是这样的

if (condition1 ()) {
   calcDisplay.innerHTML += valor;
 } else if (condition2 ()) {
   console.log('it works!');
 }

并且它每次都会放弃最新的值!

但在您的情况下,您的代码将继续,因为有问题的部分不会在程序中多次复制!

有一个很好的编码!

相关问题