简单的onClick返回函数不起作用
Simple onClick return function is not working
我有一个函数:
<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
。但是,当我单击"计算"按钮时,什么都不会发生。我做了很多其他尝试,也在互联网上搜索过,但我发现没有任何帮助。
<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:在这里进行现场演示(点击)。
/* 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;
}
您的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。
相关文章:
- Ember Data DS.Model's set函数不起作用
- 为什么我的JavaScript堆栈排序函数不起作用
- Javascript onchange()函数不起作用
- 另一个Ajax函数触发的Ajax函数不起作用
- 从PHP调用JS函数不起作用
- jQuery validate函数不起作用
- JS-窗口宽度函数不起作用
- javascript函数,该函数不起作用,但不会显示任何错误
- 为什么这个排序函数不起作用
- 为什么这个反向函数不起作用
- Javascript parseInt 函数不起作用
- 我的函数不起作用,Ajax调用,JQuery,调用外部?我不知道
- 主干构造函数不起作用
- Javascript:this.value 函数不起作用
- Mocha 的 beforeEach() 和 done() 函数不起作用
- 在jQuery中,我的函数不起作用
- jquery-ui-rails的draggable和dropable函数不起作用
- 数学函数不起作用
- Javascript-创建打印到HTML的函数不起作用
- 我上传了客户's服务器一个js函数不起作用