對錶元素進行算術計算

我有一個表格，其中一些值已經預先填好（如111.36），但是當我嘗試用數字做數學運算，或者甚至沒有任何反應時顯示數字。

謝謝您的幫助，馬克（在使用Javascript新）

function calculate_it() { 
 

 
    window.alert("In function calculate_it"); 
 

 
    var x = document.getElementByID("Numb01").value; 
 
    window.alert(x); 
 

 
    } //end function

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <TITLE>Javascript Table</TITLE> 
 
    <link href="style.css" type="text/css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <h3>A demonstration of calculators</h3> 
 

 
    <table id="t01"> 
 
    <caption>Chek this out!</caption> 
 

 
    <tr> 
 
     <th>Date</th> 
 
     <th>Number 1</th> 
 
     <th>Number 2</th> 
 
     <th>Number 3</th> 
 
     <th>Number 4</th> 
 
    </tr> 
 

 
    <tr> 
 
     <td> 
 
     <input type="text" id="Date01" value="WED21DEC16" size="10" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb01" value=111.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb02" value=222.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb03" value=333.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb04" value=444.36 size="5" /> 
 
     </td> 
 
    </tr> 
 

 

 
    <tr> 
 
     <td> 
 
     <input type="text" id="Date02" value="WED22DEC16" size="10" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb05" value=555.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb06" value=666.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb07" value=777.36 size="5" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" id="Numb08" value=888.36 size="5" /> 
 
     </td> 
 
    </tr> 
 

 

 
    <TR> 
 
     <td height="20" ColSpan="5"></td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>Multiply:</td> 
 
     <td> 
 
     <input type="text" id="ActionMulti" value="" size="5" /> 
 
     </td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>Add:</td> 
 
     <td> 
 
     <input type="text" id="ActionAdd" value="" size="5" /> 
 
     </td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>Percentage:</td> 
 
     <td> 
 
     <input type="text" id="ActionPercentage" value="" size="5" /> 
 
     </td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>----------</td> 
 
     <td>--------</td> 
 
    </TR> 
 

 
    <TR> 
 
     <td height="20" ColSpan="2"></td> 
 
     <td ColSpan="2" class='alnright'>Sum:</td> 
 
     <td> 
 
     <input type="text" id="Sum" value="" size="5" /> 
 
     </td> 
 
    </TR> 
 

 
    </table> 
 
    <br> 
 

 
    <p>Click the button to calculate the data</p> 
 
    <button type="button" onclick="calculate_it()">calculate_it</button> 
 

 
</body> 
 

 
</html>

來源

2016-12-23 MarcJ

正確功能是'的getElementById（idName）'。 –

謝謝。我是一個真正的新手.. var x = getElementByID（「Numb01」）; window.alert（x）; – MarcJ

我沒有收到彈出式提醒 – MarcJ

好吧，我想你已經讀過所有的評論說的一樣：這是getElementById不getElementByID。請記住，JavaScript 區分大小寫。

你需要運行您的代碼做什麼successfuly是簡單的兩件事情：

存儲所有輸入（數字）數組中的值。
使用縮小功能可以簡化multiply，sum和percentage的結果。

例如：

function calculate_it() { 
    var inputs = document.querySelectorAll('input[type="number"]'); 
    var multiply = 0; 
    var add = 0; 
    var percentage = 0; 

    // get the values of each input, map then and return 
    // a new array with the parsed numbers 
    var numbers = [].map.call(inputs, function (i) { 
    return parseFloat(i.value); 
    }); 

    multiply = numbers.reduce(function (n1, n2) { 
    return n1 * n2; 
    }); 
    add = numbers.reduce(function (n1, n2) { 
    return n1 + n2; 
    }); 
    percentage = numbers.reduce(function (n1, n2) { 
    return (n1/n2) * 100; 
    }); 

    document.getElementById('ActionMulti').value = multiply.toFixed(2); 
    document.getElementById('ActionAdd').value = add.toFixed(2); 
    document.getElementById('ActionPercentage').value = percentage.toFixed(2); 
    document.getElementById('Sum').value = (multiply + add + percentage).toFixed(2); 
}

的toFixedNumber的類返回與作爲參數傳遞的小數最大numner數的字符串表示。如果有必要的話，方法輪迴（經典輪）。

完整示例

function calculate_it() { 
 
    var inputs = document.querySelectorAll('input[type="number"]'); 
 
    var multiply = 0; 
 
    var add = 0; 
 
    var percentage = 0; 
 
    
 
    // get the values of each input, map then and return 
 
    // a new array with the parsed numbers 
 
    var numbers = [].map.call(inputs, function (i) { 
 
    \t return parseFloat(i.value); 
 
    }); 
 
    
 
    multiply = numbers.reduce(function (n1, n2) { 
 
    return n1 * n2; 
 
    }); 
 
    add = numbers.reduce(function (n1, n2) { 
 
    return n1 + n2; 
 
    }); 
 
    percentage = numbers.reduce(function (n1, n2) { 
 
    \t return (n1 * n2)/100; 
 
    }); 
 
    
 
    document.getElementById('ActionMulti').value = multiply.toFixed(2); 
 
    document.getElementById('ActionAdd').value = add.toFixed(2); 
 
    document.getElementById('ActionPercentage').value = percentage.toFixed(8); 
 
    document.getElementById('Sum').value = (multiply + add + percentage).toFixed(2); 
 
}

input { 
 
    width: 100%; 
 
}

<h3>A demonstration of calculators</h3> 
 

 
<table id="t01"> 
 
    <caption>Chek this out!</caption> 
 

 
    <tr> 
 
    <th>Date</th> 
 
    <th>Number 1</th> 
 
    <th>Number 2</th> 
 
    <th>Number 3</th> 
 
    <th>Number 4</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td> 
 
     <input type="text" id="Date01" value="WED21DEC16" size="10" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb01" value=11.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb02" value=12.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb03" value=7.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb04" value=4.36 size="5" /> 
 
    </td> 
 
    </tr> 
 

 

 
    <tr> 
 
    <td> 
 
     <input type="text" id="Date02" value="WED22DEC16" size="10" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb05" value=8.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb06" value=6.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb07" value=10.36 size="5" /> 
 
    </td> 
 
    <td> 
 
     <input type="number" id="Numb08" value=8.36 size="5" /> 
 
    </td> 
 
    </tr> 
 

 

 
    <TR> 
 
    <td height="20" ColSpan="5"></td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>Multiply:</td> 
 
    <td> 
 
     <input type="text" id="ActionMulti" value="" size="5" /> 
 
    </td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>Add:</td> 
 
    <td> 
 
     <input type="text" id="ActionAdd" value="" size="5" /> 
 
    </td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>Percentage:</td> 
 
    <td> 
 
     <input type="text" id="ActionPercentage" value="" size="5" /> 
 
    </td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>----------</td> 
 
    <td>--------</td> 
 
    </TR> 
 

 
    <TR> 
 
    <td height="20" ColSpan="2"></td> 
 
    <td ColSpan="2" class='alnright'>Sum:</td> 
 
    <td> 
 
     <input type="text" id="Sum" value="" size="5" /> 
 
    </td> 
 
    </TR> 
 

 
</table> 
 
<br> 
 

 
<p>Click the button to calculate the data</p> 
 
<button type="button" onclick="calculate_it()">calculate_it</button>

來源

2016-12-23 02:45:25

對錶元素進行算術計算

回答

相關問題