eval()正在返回一个空值

Question

我试图编写一个计算器的代码，但是等价按钮无法使用eval()，而且它的显示为null(HTMLButtonElement处的无效或意外的标记。) const btns = document...

const btns = document.querySelectorAll('.btn');
const screen = document.querySelector('.screen');
const equalbtn = document.querySelector('.btnequal');

for(i=0; i<btns.length; i++){

    btns[i].addEventListener('click', function(){
        var number = this.getAttribute("data-num");
        screen.value += number;
        //console.log(screen.value);
    })
}

equalbtn.addEventListener('click', function(){
    if(screen.value === ''){
       alert('Please select a value');

    } else {

    let value = eval(screen.value);
    console.log(value);

    screen.value = value;
    }
})

Answer 1

这是一个基于你给出的代码的运行计算器的例子。请注意，我从未得到任何空值。也许你的html代码是错误的，你没有添加任何代码。

const btns = document.querySelectorAll('.btn');
const screen = document.querySelector('.screen');
const equalbtn = document.querySelector('.btnequal');

let reset = false;

for(let i=0; i<btns.length; i++){

    btns[i].addEventListener('click', function(){
        let number = this.getAttribute("data-num");
        if(reset){
          screen.value = number;
          reset = false;
        }
        else{
          screen.value += number;
        }
    })
}

equalbtn.addEventListener('click', function(){
    if(screen.value === ''){
       alert('Please select a value');
    } else {
      let value = eval(screen.value);
      screen.value = value;
      reset = true;
    }
})

<input class="screen" readonly="readonly" />
<button class="btn" data-num="1">1</button>
<button class="btn" data-num="2">2</button>
<button class="btn" data-num="3">3</button>
<button class="btn" data-num="+">+</button>
<button class="btn" data-num="-">-</button>
<button class="btn" data-num="*">*</button>
<button class="btn" data-num="/">/</button>
<button class="btnequal">=</button>