Question

我是编码的新手，我正努力让这个计算工作。不确定我做错了什么。我还想知道如何在更改选项时更改功能？目的是在选项值为＆＃39; 0时使函数calculate（）工作。并且当值为＆＃39; 1＆＃39;时函数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

你只需要设置一个在select更改时调用的函数，将select作为参数传递给函数。

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，因此您只需要执行一个函数。由于您不需要更改函数，我们只需要智能地确定myResult1的值，具体取决于<select/>的值是0还是1.有几种不同的方法可供选择完成这个。在这里，我将演示如何使用conditional ("ternary") operator动态设置myResult1的值：

＆＃13;

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

＆＃13;

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

＆＃13;

通常，HTML event属性用于调用脚本标记中其他位置指定的函数。在极少数情况下，您可能希望将JavaScript代码直接添加到这些onClick或onMouseOver事件代码中，但这不是一个好的设计。正如@scott-marcus所指出的那样，您可能希望使用JavaScript HTML DOM EventListener：

＆＃13;

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

＆＃13;

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

＆＃13;

试图让计算工作并改变不同选项的功能？

3 个答案: