簡單的onClick回報功能無法正常工作

Question

我有一個函數：

 <script type = "text/javascript"> 
     function calcEstimate(instrument, damage) 
     { 
      var cost = 0; 
      if (instrument.value == "guitar" || instrument.value == "bass") 
      { 
       cost = Number(damage.value) * 150; 
       document.getElementById('txtCost').value = cost; 
      } 
      else 
      { 
       cost = Number(damage.value) * 300; 
       document.getElementById('txtCost').value = cost; 
      } 
     } 
    </script> 

而且形式與一些輸入：

  <form style = "border: solid white 1px; width:35%;" name = "calculator"> 
      <table> 
       <tr> 
        <th style = "font-size: 20px;" colspan = 3;> Select your instrument: </th> 
       </tr> 

       <tr> 
        <th> Percussion: </th> 
        <th> Strings: </th> 
        <th> Brass: </th> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "instrument" value = "keyboard_piano">Keyboard/ Piano. </td> 
        <td> <input type = "radio" name = "instrument" value = "guitar">Guitar. </td>      
        <td> <input type = "radio" name = "instrument" value = "bass">Trumpet. </td> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "instrument" value = "bass_drum">Bass drum. </td> 
        <td> <input type = "radio" name = "instrument" value = "bass">Bass. </td> 
        <td> <input type = "radio" name = "instrument" value = "trombone">Trombone. </td> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "instrument" value = "snare_drum">Snare drum. </td> 
        <td> <input type = "radio" name = "instrument" value = "violin">Violin. </td>      
        <td> <input type = "radio" name = "instrument" value = "tuba">Tuba. </td> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "instrument" value = "tom_toms">Tom-toms. </td> 
        <td> <input type = "radio" name = "instrument" value = "cello">Cello. </td>      
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "instrument" value = "ride_cymbal">Ride Cymbal. </td> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "instrument" value = "crash_cymbal">Crash Cymbal. </td> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "instrument" value = "hi_hat">Hi-hat. </td> 
       </tr>      

      </table> 

      <table> 
       <tr> 
        <th style = "font-size: 20px;"> Scale of damage: </th> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "damage" value = "1">1. Slight damage, cracks. </td> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "damage" value = "2">2. Some broken parts. </td> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "damage" value = "3">3. Parts missing, broken off, may be unplayable. </td> 
       </tr> 

       <tr> 
        <td> <input type = "radio" name = "damage" value = "4">4. In pieces, completely unplayable. </td> 
       </tr> 
      </table> 

      <table> 
       <tr> 
        <td> 
         <input type = "button" name = "calculate" value = "Calculate" onClick ="calcEstimate(instrument,damage);"> 
         <input type = "reset" name = "reset" value = "Reset Form"> 
        </td> 
       </tr>     

       <tr> 
        <th style = "font-size: 20px;"> Estimate: </th> 
       </tr> 

       <tr> 
        <td> <input type = "text" id="txtCost" name = "cost" size = 25> </td> 
       </tr> 
      </table> 
     </form> 

我希望能夠選擇單選按鈕instrument和無線電按鈕damage，點擊calculate按鈕並通過damage和instrument到函數calcEstimate，它將在那裏進行計算並返回變量cost。但是，當我點擊計算按鈕時，根本沒有任何反應。我做了很多其他的嘗試，並搜索了互聯網，但沒有發現我似乎在幫助。

Answer 1

您的JavaScript將是：

var damageValue = 0; 
function getDamage(val){ 
    damageValue = val; 
} 
function calcEstimate(instrument, damage) 
      { 
       var cost = 0; 
       if (instrument.value == "guitar" || instrument.value == "bass") 
       { 
        cost = Number(damageValue) * 150; 
        document.getElementById('txtCost').value = cost; 
       } 
       else 
       { 
        cost = Number(damageValue) * 300; 
        document.getElementById('txtCost').value = cost; 
       } 
      } 

和你的HTML會是這樣的：

<input type = "radio" name = "instrument" value = "guitar">Guitar. 
<input type = "radio" name = "damage" value = "1" onclick="getDamage(this.value);"> 

<input type = "button" name = "calculate" value = "Calculate" onClick ="calcEstimate(instrument,damage);"> 
<input type = "text" id="txtCost" name = "cost" size = 25> 

請確保您有一個工具，當你使用它上面的計算對象。如果沒有，你應該嘗試學習JavaScript比現在更多。

Answer 2

<label><input type="radio" name="instrument" value="guitar">Guitar</label> 
<label><input type = "radio" name="damage" value="1">Damage</label> 

<button name="calculate">Calculate</button> 
<input type="text" name="cost" size="25"> 

js: live demo here (click).

/* Get your element references */ 
var instrument = document.querySelector('input[name=instrument]'); 
var damage = document.querySelector('input[name=damage]'); 
var calculate = document.querySelector('button[name=calculate]'); 
var cost = document.querySelector('input[name=cost]'); 

calculate.addEventListener('click', function() { 
    cost.value = calcEstimate(instrument.value, damage.value); 
}); 

function calcEstimate(instrument, damage) { 
    var cost = 0; 
    if (instrument.value == "guitar" || instrument.value == "bass") { 
    cost = Number(damage) * 150; 
    } 
    else { 
    cost = Number(damage) * 300; 
    } 
    return cost; 
}