javascript - 简单的 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按钮并通过损坏和仪器到函数calcEstimate，它将在其中进行计算并返回变量cost。但是，当我单击计算按钮时，什么也没有发生。我做了很多其他尝试并搜索了互联网，但我发现似乎没有任何帮助。

Answer 1

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