用Javascript動態添加文本框的值

我希望在單擊按鈕時獲得總和，但沒有任何反應。然而，這是我想要使用的代碼的簡化版本。實際上，使用php從數據庫中查詢文本框的值。請F1。這是完整的代碼。用Javascript動態添加文本框的值

<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>

來源

2015-02-09 Nditah

不同的元素不能有相同的ID，它是無效的HTML。這不是你的問題的原因，但這是不好的做法。 – DoctorMick 2015-02-09 14:52:20

相同的ID，我相信你的意思 – Suppen 2015-02-09 14:52:59

@DoctorMick根本不是真的;重用「名稱」值完全可以。它真的取決於服務器端框架。現在，重新使用「id」值，這很糟糕。 – Pointy 2015-02-09 14:53:21

問題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。

來源

2015-02-09 15:01:23 DoctorMick

您的代碼充滿了錯誤。我將它固定爲基準使用

爲所有要合計的輸入元素添加一個類，不要將相同的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(var i = 0; i < len; ++i){

檢查如果元素，你給他們

if(mutli_Credit[i].className === "sumInput")

的ID解決您的發言總結el對此語句

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>

來源

2015-02-09 15:09:31 nanndoj

我已完成所有建議，但仍無效。此外，我不想更改文本框的名稱，因爲只有它自動由PHP回顯，但它將在提交時發佈到php腳本 – Nditah 2015-02-09 15:16:40

用Javascript動態添加文本框的值

回答

相關問題