如何用按钮值onclick改变全局变量

Question

我正在使用html和Javascript制作一个简单的计算器。以下是单击按钮时正在工作并更新计算器显示的代码。

const display = document.querySelector('#display');
const cells = document.querySelectorAll('.cell');
cells.forEach((cell) => {
cell.addEventListener('click', (e) => {
if (e.target.value !== NaN) {
a = e.target.value;
} else {
a = parseInt(e.target.value, 10);
};
display.textContent += a + ' ';
});
});

我试图将按钮值保存到一个全局变量中，以便我可以稍后在数学操作中使用它，如下所示。我声明了一个全局变量x，并试图在单击按钮时更新它。

const display = document.querySelector('#display');
let x;
const cells = document.querySelectorAll('.cell');
cells.forEach((cell) => {
cell.addEventListener('click', (e) => {
if (e.target.value !== NaN) {
a = e.target.value;
x = a;
} else {
a = parseInt(e.target.value, 10);
x = a;
};
display.textContent += a + ' ';
});
});
console.log(x);

显示。textContent按预期工作，但console.log(x)在单击按钮时没有更新。如何用button.value更新变量x ?

Answer 1

在赋值之前访问变量。

onClick函数将被调用，当用户点击"。cell"元素

const display = document.getElementById('#display');
let x;
const cells = document.querySelectorAll('.cell');
cells.forEach((cell) => {
cell.addEventListener('click', (e) => {
if (e.target.value !== NaN) {
a = e.target.value;
x = a;
} else {
a = parseInt(e.target.value, 10);
x = a;
};
display.textContent += a + ' ';
});
});

// Called first
console.log(x);
// Asyn call
setInterval(function(){
console.log("from Interval");
console.log(x);
}, 1000)

input {
display: block;
}

<div id="#display"></div>
<input class="cell" value="1"/>
<input class="cell" value="2"/>
<input class="cell" value="3"/>

Answer 2

除了不显示x之外，我强烈建议您委托

const getNum = n => !isNaN(parseFloat(n)) && isFinite(n) ? parseInt(n) : 0;
window.addEventListener("load", function() { // on page load
const calc = document.getElementById('calc');
const display = document.getElementById('#display');
let x;
calc.addEventListener('click', (e) => {
const tgt = e.target; 
if (tgt.classList.contains("cell")) {
x = getNum(tgt.value)
display.textContent += x + ' ';
console.log(x);
}
});
});

input {
display: block;
}

<div id="#display"></div>
<div id="calc">
<input class="cell" value="1" />
<input class="cell" value="2" />
<input class="cell" value="3" />
</div>