![](/img/trans.png)
[英]how to add text boxes dynamically without losing values of previous textboxes?
[英]Add the Values of Text boxes dynamically with Javascript
我希望在單擊按鈕時得到總和,但是什么也沒有發生。 但是,這是我要使用的代碼的簡化版本。 實際上是使用php從數據庫中查詢文本框的值。 請F1。 這是完整的代碼。
<html>
<head>
</head>
<body>
<h1> JavaScript </h1>
<script type="text/javascript">
// Addint an array of values from a text box
function calc(){
var mutli_Credit = document.course_reg.elements['Credit[]'];
var sum = 0, i = 0, len = mutli_Credit.length;
for(i < len; ++i){
sum += parseInt(document.getElementById('Credit[i]).value, 10);
// Use parseFloat if you're dealing with floating point numbers.
}
//alert(sum);
document.getElementById('credit_load').value = sum;
};
</script>
<form name='course_reg' onLoad=''>
MATH101 <input type='text' name='Credit[]' value='3' id='Credit[]' size='3' readonly /><br/>
CSC201 <input type='text' name='Credit[]' value='2' id='Credit[]' size='3' readonly /><br/>
EDU301 <input type='text' name='Credit[]' value='2' id='Credit[]' size='3' readonly /><br/>
<BUTTON onClick='calc()'> CALCULATE </BUTTON>
Total Credit Load:<input type='text' value='' id='credit_load' name='credit_load' size='3' readonly/></p>
</form>
</body>
</html>
問題1-您需要在for循環中初始化計數器變量。
for(i = 0; i < len; ++i){
問題2-您嘗試使用其索引獲取元素的方式不正確,您應該使用從頂部獲取的元素數組。
sum += parseInt(mutli_Credit[i].value, 10);
問題3-您沒有從函數中返回任何內容,因此頁面刷新了。
function calc(){
....
return false;
};
<BUTTON onClick='return calc()'> CALCULATE </BUTTON>
並刪除重復的ID。
您的代碼充滿錯誤。 我修復了它供您用作基礎
為您要求和的所有輸入元素添加一個類,切勿對不同元素使用相同的ID,並為要求和的所有輸入添加一個類;
MATH101 <input type='text' name='Credit0' value='3' id='Credit0' class="sumInput" size='3' readonly /><br/>
CSC201 <input type='text' name='Credit1' value='2' id='Credit1' class="sumInput" size='3' readonly /><br/>
EDU301 <input type='text' name='Credit2' value='2' id='Credit2' class="sumInput" size='3' readonly /><br/>
檢索所有輸入元素
var mutli_Credit = document.getElementsByTagName("input");
通過初始化變量來修復for語句
for(var i = 0; i < len; ++i){
檢查元素是否具有您給他們的ID
if(mutli_Credit[i].className === "sumInput")
對元素求和
sum += parseInt(mutli_Credit[i].value);
這是固定的代碼:
// Addint an array of values from a text box
function calc(){
var mutli_Credit = document.getElementsByTagName("input");
var sum = 0, i = 0, len = mutli_Credit.length;
for(var i = 0; i < len; ++i){
if(mutli_Credit[i].className === "sumInput") {
sum += parseInt(mutli_Credit[i].value);
}
}
document.getElementById('credit_load').value = sum;
};
...
MATH101 <input type='text' name='Credit0' value='3' id='Credit0' class="sumInput" size='3' readonly /><br/>
CSC201 <input type='text' name='Credit1' value='2' id='Credit1' class="sumInput" size='3' readonly /><br/>
EDU301 <input type='text' name='Credit2' value='2' id='Credit2' class="sumInput" size='3' readonly /><br/>
<BUTTON onClick='calc()'> CALCULATE </BUTTON>
Total Credit Load:<input type='text' value='' id='credit_load' name='credit_load' size='3' readonly/></p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.