Question

var a = document.f1.getElementsByName('num1');
var b = document.f1.getElementsByName('num2');

function add() {
  alert('The sum is ' + parseInt(a) + parseInt(b));
};

body {
  background-color: #333333;
  color: #e6e6e6;
  font-family: 'Calibri', sans-serif;
  font-size: 100%;
  margin: 0 auto;
}

.addition {
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  display: table;
}

.addition input {
  background-color: #8585ef;
  border: 3px solid;
  border-color: #2f2fef;
  border-radius: 1em;
  color: #ffffff;
  display: table-column;
  padding: .6em;
}

<form class="addition" name="f1">
  <input type="number" name="num1" min="0"> +
  <input type="number" name="num2" min="0">
  <input style="margin-left:.3em;" type="button" name="Add" value="Add" onclick="add();">
</form>

单击添加按钮时，警报不会支付总和，它会显示字符串和未定义的变量。如何解决此问题，请帮助进行变量声明。

Answer 1

有很多方法可以从输入中获取价值。您可以使用id，class等。

在JavaScript中，要从id中获取价值，您必须写下来：

var yourValue = document.getElementById("val1");
alert(yourValue.value);

要从课堂上获得价值，您必须写下来：

var yourValue = document.getElementsByClassName("val1");
for (var i = 0; i < yourValue.length; ++i){
    alert(yourValue[i].value);
}

要想从名字中获得价值，就必须写下来：

var yourValue = document.getElementsByName("val1");
for (var i = 0; i < yourValue.length; ++i)
{
    alert(yourValue[i].name); // to get current name's name
    alert(yourValue[i].value); // to get val1 value
}

Answer 2

/*
// you need new values every time so place them inside of the function
var a = document.f1.getElementsByName('num1');
var b = document.f1.getElementsByName('num2');

function add() {
  alert('The sum is ' + praseInt(a) + praseInt(b));
  // plus sign concatenate and transforms all into string
  so you need sum the arguments and THEN + it to the string
};*/
// don't use inline functions, use event listeners
document.getElementsByName('Add')[0].addEventListener('click', add)

function add() {
  var a = document.getElementsByName('num1')[0].value;
  var b = document.getElementsByName('num2')[0].value;
  alert('The sum is ' + (parseInt(a) + parseInt(b)));
};

body {
  background-color: #333333;
  color: #e6e6e6;
  font-family: 'Calibri', sans-serif;
  font-size: 100%;
  margin: 0 auto;
}

.addition {
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  display: table;
}

.addition input {
  background-color: #8585ef;
  border: 3px solid;
  border-color: #2f2fef;
  border-radius: 1em;
  color: #ffffff;
  display: table-column;
  padding: .6em;
}

<form class="addition" name="f1">
  <input type="number" name="num1" min="0"> +
  <input type="number" name="num2" min="0">
  <input style="margin-left:.3em;" type="button" name="Add" value="Add">
</form>

Answer 3

警报呼叫的parseInt中似乎存在拼写错误。

var a = document.f1.getElementsByName('num1');
var b = document.f1.getElementsByName('num2');

function add() {
  alert('The sum is ' + praseInt(a) + praseInt(b)); // <= Change praseInt to parseInt
};

正确的方法：

var a = document.f1.getElementsByName('num1').value;
var b = document.f1.getElementsByName('num2').value;
alert('num1 is ' + a);
alert('num2 is ' + b);
function add() {
  alert('The sum is ' + (parseInt(a) + parseInt(b)));
};

如何从html中的输入标签获取Java脚本的变量值

3 个答案: