我想創建一個表單，我將在其中使用用戶輸入的值執行操作，但是當函式運行時，我得到 NaN 回傳。預先感謝您的幫助。
function test() {
var age = document.getElementsByName("person_age").value;
var weight = document.getElementsByName("person_weight").value;
var size = document.getElementsByName("person_size").value;
document.getElementById("result").innerHTML = weight size age;
}<form>
<input type="text" name="person_age">
<input type="text" name="person_size">
<input type="text" name="person_weight">
<input type="button" value="calculate" onclick="test();">
</form>
<h3 id="result"></h3>`輸出：
NaN
當我從用戶那里獲取值并運行該函式時，我會得到 NaN 反饋。我怎么解決這個問題。
uj5u.com熱心網友回復：
只是一個建議：如果您想直接訪問該值，可以使用Document.getElementById。只需在您的元素中添加一個 ID 屬性。它將回傳一個字串值，將其轉換為 int 就可以了。
function test() {
var age = document.getElementById("person_age").value;
var weight = document.getElementById("person_weight").value;
var size = document.getElementById("person_size").value;
document.getElementById("result").innerHTML = parseInt(weight) parseInt(size) parseInt(age);
}<form>
<input type="text" name="person_age" id="person_age">
<input type="text" name="person_size" id="person_size">
<input type="text" name="person_weight" id="person_weight">
<input type="button" value="calculate" onclick="test();">
</form>
<h3 id="result"></h3>uj5u.com熱心網友回復：
有多個錯誤需要糾正
1）當你使用時getElementsByName，它會NodeList像集合一樣回傳陣列。所以你必須使用indexas來獲取元素：
var age = document.getElementsByName( "person_age" )[0].value;
2）如果您需要sum所有三個值，那么您必須將其轉換為Number型別，因為document.getElementsByName( "person_age" )[0]在String型別中為您提供值。所以你可以這樣做：
document.getElementsByName( "person_age" )[0].value
function test() {
var age = document.getElementsByName("person_age")[0].value;
var size = document.getElementsByName("person_size")[0].value;
var weight = document.getElementsByName("person_weight")[0].value;
document.getElementById("result").innerHTML = weight size age;
}<form>
<input type="text" name="person_age">
<input type="text" name="person_size">
<input type="text" name="person_weight">
<input type="button" value="calculate" onclick="test();">
</form>
<h3 id="result"></h3>uj5u.com熱心網友回復：
getElementsByName將始終回傳一個類似陣列的節點串列，因此，如果要使用它，則需要訪問第一個 index[0]。而是為每個輸入添加一個類并用于querySelector定位它。輸入的值將始終是一個字串（即使輸入的型別是“數字”），所以你需要或者通過使用它強制為數字，
Number或前綴與價值
所以，在這個例子中，我通過向輸入添加類，將它們的型別更改為“數字”，并洗掉行內 JS，并更新了 JS，以便元素快取在函式之外，從而對 HTML 進行了一些更新，事件偵聽器被添加到按鈕，并且值被正確計算。
// Cache all the elements using querySelector to target
// the classes, and add an event listener to the button
// that calls the function when it's clicked
const ageEl = document.querySelector('.age');
const weightEl = document.querySelector('.weight');
const sizeEl = document.querySelector('.size');
const result = document.querySelector('#result');
const button = document.querySelector('button');
button.addEventListener('click', test, false);
function test() {
// Coerce all the element values to numbers, and
// then display the result
const age = Number(ageEl.value);
const weight = Number(weightEl.value);
const size = Number(sizeEl.value);
// Use textContent rather than innerHTML
result.textContent = weight size age;
}<form>
<input type="number" name="age" class="age" />
<input type="number" name="size" class="size" />
<input type="number" name="weight" class="weight" />
<button type="button">Calculate</button>
</form>
<h3 id="result"></h3>`轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/344634.html
標籤：javascript html 功能