试图让计算工作和更改不同选项上的功能？

Question

我是新来的编码，我努力让这个计算工作。不知道我做错了什么。我也想知道如何改变选择选项更改时的功能？目标是在选项值为'0'时使函数calculate（）工作，在值为'1'时使函数calculate2（）。任何帮助不胜感激。

https://jsfiddle.net/8r5d0boc/3/

<select id ="option"> 
<option value="0">Quali</option> 
<option value="1">Free</option> 
</select> 

<input id="bstake" type="number" onInput="calculate()"> 
<input id="display" type="number" readonly> 
<button id="calc" onClick="calculate()">Calculate</button> 

这里的脚本

function calculate() 
{ 
    var backstake = document.getElementById('bstake').value; 
    var result1 = document.getElementById('display'); 
     var myResult1 = (10-backstake); 
     result1.value = myResult1; 
} 
function calculate2() 
{ 
     var backstake = document.getElementById('bstake').value; 
     var result2 = document.getElementById('display'); 
    var myResult1 = (50-backstake); 
    result1.value = myResult1; 
} 

Answer 1

你只需要设置一个函数被调用时，选择的变化，通过选择作为参数传递给函数。

function calculate() { 
 
    var backstake = document.getElementById('bstake').value; 
 
    var result1 = document.getElementById('display'); 
 
    var myResult1 = (10-backstake); 
 
    result1.value = myResult1; 
 
} 
 

 
function calculate2() { 
 
    var backstake = document.getElementById('bstake').value; 
 
    var result2 = document.getElementById('display'); 
 
    var myResult1 = (50-backstake); 
 
    result2.value = myResult1; 
 
} 
 

 
function checkOptions(select) { 
 
    if (select.options[select.selectedIndex].value == 0) 
 
    calculate(); 
 
    else if (select.options[select.selectedIndex].value == 1) 
 
    calculate2(); 
 
}

<select id="option" onchange="checkOptions(this)"> 
 
<option value="0">Quali</option> 
 
<option value="1">Free</option> 
 
</select> 
 

 
<input id="bstake" type="number" onInput="calculate()"> 
 
<input id="display" type="number" readonly> 
 
<button id="calc" onClick="calculate()">Calculate</button>

Answer 2

的两个功能是差不多相同的，所以我们不会写的基本上是相同的东西两个版本。相反，我们可以有一个接受参数作为输入的函数，并且基于该输入，函数将以两种方式之一进行响应。其次，最好不要将HTML元素通过HTML属性连接到JavaScript事件处理程序。这会产生难以阅读和维护的“意大利面代码”。但是，它也会创建匿名全局包装函数来保存属性值。相反，在JavaScript中执行所有的事件接线。

// Get DOM references: 
 
var btn = document.getElementById("calc"); 
 
var list = document.getElementById("option"); 
 
var output = document.getElementById("display"); 
 
var backstake = document.getElementById("bstake"); 
 

 
// Wire up event handlers: 
 
btn.addEventListener("click", function(){ 
 
    calculate(list.value); 
 
}); 
 

 
backstake.addEventListener("input", function(){ 
 
    calculate(list.value); 
 
}); 
 

 
// Event handler: 
 
function calculate(input){ 
 
    if(input === "0"){ 
 
     myResult = 10-backstake.value; 
 
    } else { 
 
     myResult = 50-backstake.value; 
 
    } 
 
    
 
    output.value = myResult; 
 
}

<select id ="option"> 
 
<option value="0">Quali</option> 
 
<option value="1">Free</option> 
 
</select> 
 

 
<input id="bstake" type="number"> 
 
<input id="display" type="number" readonly> 
 
<button id="calc">Calculate</button>

Answer 3

因为这两个功能几乎是相同的，并且被更改的唯一的价值是不同的myResult1，你只需要执行一个功能。由于您不需要更改函数，我们只需要根据<select/>的值是0还是1来智能地确定myResult1的值。有几种不同的方法来完成此操作。在这里，我将演示如何设置的myResult1值动态地使用conditional ("ternary") operator：

function calculate() { 
 
    var option = document.getElementById('option').value; 
 
    var backstake = document.getElementById('bstake').value; 
 
    var result1 = document.getElementById('display'); 
 
    var myResult1 = (option == '0') ? (10 - backstake) : (50 - backstake); 
 
    result1.value = myResult1; 
 
}

<select id="option"> 
 
<option value="0">Quali</option> 
 
<option value="1">Free</option> 
 
</select> 
 

 
<input id="bstake" type="number" onInput="calculate()"> 
 
<input id="display" type="number" readonly> 
 
<button id="calc" onClick="calculate()">Calculate</button>

通常情况下，HTML event属性来调用脚本标记另行规定的功能。在极少数情况下，您可能希望将JavaScript代码直接添加到这些onClick或onMouseOver事件代码中，但这不被认为是很好的设计。作为@scott-marcus指出的那样，你可能想要去与JavaScript HTML DOM EventListener：

function calculate() { 
 
    var option = document.getElementById('option').value; 
 
    var backstake = document.getElementById('bstake').value; 
 
    var result1 = document.getElementById('display'); 
 
    var myResult1 = (option == '0') ? (10 - backstake) : (50 - backstake); 
 
    result1.value = myResult1; 
 
} 
 

 
document.getElementById('bstake').addEventListener('input', calculate); 
 
document.getElementById('calc').addEventListener('click', calculate);

<select id="option"> 
 
<option value="0">Quali</option> 
 
<option value="1">Free</option> 
 
</select> 
 

 
<input id="bstake" type="number"> 
 
<input id="display" type="number" readonly> 
 
<button id="calc">Calculate</button>