为什么我在函数内部访问时将我赋予数字输入标记值的全局变量解析为字符串？

Question

我是javascript的新手，我正在制作一个带有两个数字输入标签的小型网络计算器。我将输入的“type”属性设置为“= number”，现在我希望当用户点击“添加”按钮时，他/她获得输出。但问题是，当我声明任何包含输入GLOBALLY的值（安全地包含在“parseInt”中）的变量，并访问我的函数中的var时，它将被解析为字符串。（即使在使用parseInt之后）我尝试在fucntion中声明变量，它工作正常，我的意思是它只被解析为NUMBER。但问题是我不能在evry函数中重复分配变量，用于add，sub，divide..etc，因为ode将变得长而且沉重。请帮帮我，告诉我怎样才能宣布var GLOBALLY但是作为NUMBER ...var value1, value2;value1 = parseInt(document.getElementById("value1").value);value2 = parseInt(document.getElementById("value2").value);function add() {  added = value1 + value2;  document.getElementById("output").innerHTML = added;}First no:<input type="number" id="value1"><br> Second no:<input type="nunmber" id="value2"><br><button onclick="add()">add</button><br> output: <span id="output"></span>

Answer 1

在这里你可以看到用全局变量解决了你的问题。

var value1, value2;

function add() {

  value1 = parseInt(document.getElementById("value1").value);

  value2 = parseInt(document.getElementById("value2").value);

  if(value1 && value2){

    added = value1 + value2;

    document.getElementById("output").innerHTML = added;

    checkGlobalVal();

  }else{

    console.log('Please give the input value.');

  }

  

}

function checkGlobalVal(){

  console.log('value1:',value1,' value2:',value2);

}

First no:<input type="number" id="value1"><br> Second no:<input type="nunmber" id="value2"><br>

<button onclick="add()">add</button><br> output: <span id="output"></span>

Answer 2

您可以将变量赋值移动到函数内部，这样每次设置函数时它们都会被设置，因此您不必从HTML端传递它们：

function add() {

  var value1 = parseInt(document.getElementById("value1").value);

  var value2 = parseInt(document.getElementById("value2").value);

  var added = value1 + value2;

  document.getElementById("output").innerHTML = added;

}

First no:<input type="number" id="value1"><br> Second no:<input type="nunmber" id="value2"><br>

<button onclick="add()">add</button><br> output: <span id="output"></span>

编辑：如果您希望变量是全局变量，您可以使用事件侦听器：

var value1, value2;

document.getElementById("value1").addEventListener('input', function (evt) {

    value1 = +evt.target.value

});

document.getElementById("value2").addEventListener('input', function (evt) {

    value2 = +evt.target.value

});

function add() {

  var added = value1 + value2;

  document.getElementById("output").innerHTML = added;

}

First no:<input type="number" id="value1"><br> Second no:<input type="nunmber" id="value2"><br>

<button onclick="add()">add</button><br> output: <span id="output"></span>