如何從html中的輸入標簽獲取Java腳本的變量值

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)));
};