如何为输入创建全局变量以及为什么要添加

Question

function additon() {  const value_1 = document.getElementById('value_1').value;  const value_2 = document.getElementById('value_2').value;  const answer = document.getElementById('answer');    var additon = (value_1 + value_2);    answer.innerHTML = additon;}function subtraction(){  const value_1 = document.getElementById('value_1').value;  const value_2 = document.getElementById('value_2').value;  const answer = document.getElementById('answer');  var subtraction = (value_1 - value_2);  answer.innerHTML = subtraction;}Enter value 1 <input type="tel" id="value_1"><br>Enter value 2 <input type="tel" id="value_2"><br>Answer: <span class="answer" id="answer"></span>  <br><button class="btn btn-success btn-lg" onclick="additon()">+</button><button class="btn btn-danger btn-lg" onclick="subtraction()">-</button><button class="btn btn-succes btn-lg" onclick="multiplication()">X</button><button class="btn btn-succes btn-lg" onclick="division()">/</button>为什么要加1 + 1 = 11。减法工作正确以及如何为值输入创建全局变量我想成为一个实时更新的计算器。

Answer 1

function additon() {

    const value_1 = document.getElementById('value_1').value;

    const value_2 = document.getElementById('value_2').value;

    const answer = document.getElementById('answer');

    var additon = (value_1*1 + value_2*1); // Multiplying changes the type to NUM

    answer.innerHTML = additon;

}

function subtraction(){

    const value_1 = document.getElementById('value_1').value;

    const value_2 = document.getElementById('value_2').value;

    const answer = document.getElementById('answer');

    var subtraction = (value_1*1 - value_2*1); // Multiplying changes the type to NUM

    answer.innerHTML = subtraction;

}

Answer 2

它把它当作string而不是integer。试试这个：

function additon() {

  var value_1 = document.getElementById('value_1').value;

  var value_2 = document.getElementById('value_2').value;

  var answer = document.getElementById('answer');

  

  var additon = +value_1 + +value_2;

  

  answer.innerHTML = additon;

}

Enter value 1 <input type="tel" id="value_1">

<br>

Enter value 2 <input type="tel" id="value_2">

<br>

Answer: <span class="answer" id="answer"></span>  

<br>

<button class="btn btn-success btn-lg" onclick="additon()">+</button>

或者

您可以使用Number()来处理数字。

function additon() {

  var value_1 = Number(document.getElementById('value_1').value);

  var value_2 = Number(document.getElementById('value_2').value);

  var answer = document.getElementById('answer');

  

  var addition = value_1 + value_2; 

  

  answer.innerHTML = addition;

}

Enter value 1 <input type="tel" id="value_1">

<br>

Enter value 2 <input type="tel" id="value_2">

<br>

Answer: <span class="answer" id="answer"></span>  

<br>

<button class="btn btn-success btn-lg" onclick="additon()">+</button>

Answer 3

我的答案

你好，来自互联网的随机陌生人看起来你忘记将输入解析为数字所以这是你的固定代码

function additon() {

  const value_1 = Number(document.getElementById('value_1').value);

  const value_2 = Number(document.getElementById('value_2').value);

  const answer = document.getElementById('answer');

  const additon = value_1 + value_2;

  answer.innerHTML = additon;

}

function subtraction() {

  const value_1 = Number(document.getElementById('value_1').value);

  const value_2 = Number(document.getElementById('value_2').value);

  const answer = document.getElementById('answer');

  const subtraction = value_1 - value_2;

  answer.innerHTML = subtraction;

}

// oh and i added the multiplication and division too

function multiplication() {

  const value_1 = Number(document.getElementById('value_1').value);

  const value_2 = Number(document.getElementById('value_2').value);

  const answer = document.getElementById('answer');

  const multiplication = value_1 * value_2;

  answer.innerHTML = multiplication;

}

function division() {

  const value_1 = Number(document.getElementById('value_1').value);

  const value_2 = Number(document.getElementById('value_2').value);

  const answer = document.getElementById('answer');

  const division = value_1 / value_2;

  answer.innerHTML = division;

}

Enter value 1 <input type="tel" id="value_1" />

<br />

Enter value 2 <input type="tel" id="value_2" />

<br />

Answer: <span class="answer" id="answer"></span>

<br />

<button class="btn btn-success btn-lg" onclick="additon()">+</button>

<button class="btn btn-danger btn-lg" onclick="subtraction()">-</button>

<button class="btn btn-succes btn-lg" onclick="multiplication()">X</button>

<button class="btn btn-succes btn-lg" onclick="division()">/</button>