在OnChange事件中需要幫助Javascript

我有五個文本字段，分別是mark1，mark2，mark3，mark4和total。我有一個問題，使總數自動顯示在文本字段。計算部分沒有問題。但是我不能讓總數自動顯示在文本字段中。一旦用戶輸入完所有四個標記後，如何讓總數自動顯示在文本框中？我知道這與使用Javascript的OnChange事件有關。但我沒有得到正確的代碼。有人可以幫助我嗎？真的需要你的建議。在OnChange事件中需要幫助Javascript

謝謝。

來源

2010-01-10 Daisy

您能提供一些代碼示例嗎？ – 2010-01-10 05:07:00

黛西，這樣的事情應該工作。您可以在JSBin上的此代碼的view a live demo。

<input type="text" name="mark1" id="mark1" value="" /> 
<input type="text" name="mark2" id="mark2" value="" /> 
<input type="text" name="mark3" id="mark3" value="" /> 
<input type="text" name="mark4" id="mark4" value="" /> 
<input type="text" name="total" id="total" value="" /> 

<!-- Script block must come AFTER the input elements --> 

<script type="text/javascript"> 
    var m1 = document.getElementById('mark1'), 
     m2 = document.getElementById('mark2'), 
     m3 = document.getElementById('mark3'), 
     m4 = document.getElementById('mark4'), 
     total = document.getElementById('total'); 

    function calculate_total(){ 
    // Use your real calculation here 
    total.value = Number(m1.value) + Number(m2.value) + Number(m3.value) + Number(m4.value); 
    } 

    if(window.addEventListener) { 
    m1.addEventListener('change', calculate_total, false); 
    m2.addEventListener('change', calculate_total, false); 
    m3.addEventListener('change', calculate_total, false); 
    m4.addEventListener('change', calculate_total, false); 
    } else if(window.attachEvent){ 
    m1.attachEvent('onchange', calculate_total); 
    m2.attachEvent('onchange', calculate_total); 
    m3.attachEvent('onchange', calculate_total); 
    m4.attachEvent('onchange', calculate_total); 
    } 
</script>

UPDATE：既然你想有一個字母等級進入（A，B，C，F等），我會建議select控制而不是input[type='text']。一個檔次場應該是這樣的：

<select name="mark1" id="mark1"> 
    <option value="">Select Grade</option> 
    <option value="100">A</option> 
    <option value="90">B</option> 
    <option value="80">C</option> 
    <option value="70">D</option> 
    <option value="50">F</option> 
</select>

你把數值在value=部分，但是可以顯示友好的A，B，C等

，隨時隨地有.value換成.selectedValue（當然除total.value）。

來源

2010-01-10 05:22:09

感謝您的代碼。但我在這裏確實有一些問題，因爲用戶只能輸入等級。系統會從等級中統計分數。例如，如果用戶輸入A，則標記爲100，如果B的標記爲70.我該怎麼做？任何想法？ – Daisy 2010-01-10 05:58:36

總是在**專有的方法之前測試標準方法**（在這種情況下爲'attachEvent'與'addEventListener'）。另外，如果'attachEvent'不存在，則不要認爲'addEventListener'存在。 – kangax 2010-01-10 23:34:25

@kangax好點。我想我一直認爲它是相反的（使用專有的第一），但這是總的感覺......不知道爲什麼它不會出現在我以前。回答更新以反映這兩個意見。謝謝！如果兩個測試都失敗了，你會在'else'語句中使用第三個setter，如'm1.onchange = function（）{...}'。 – 2010-01-11 00:30:21

雛菊，Doug provided a great answer，但在閱讀您的評論後，我想我會貢獻一個小小的改變。請注意0數組數值和對Doug的函數的小改動：

// Add grades and corresponding value below 
var grades = {A:100,B:70}; 

function calculate_total(){ 
    // Use your real calculation here 
    total.value = grades[m1.value] + grades[m2.value] + grades[m3.value] + grades[m4.value]; 
}

來源

2010-01-10 06:08:45 Sampson

在OnChange事件中需要幫助Javascript

回答

相關問題