Javascript 将选项链接到 else if

Question

我对为什么我的代码不起作用感到有点困惑。我是新手，非常想知道我哪里出错了! 我想通过 var z 对我选择的任何选项进行计时，但无法使其正常工作。

到目前为止，这是我的代码:

<td><select>


  <option id="VAS" value="70">VAS</option>
  <option id="VTS" value="80">VTS</option>
  <option id="VAF" value="60">VAF</option>
  <option id="VGS" value="40">VGS</option>
  </select></td>
  <td>
   <input type="number" id="number" name="number">
  </td>
  <td>

<button onclick="myFunction()"> Total Value</button>
<br/>
<br/>


  <p id="value"></p>
  <script>
  function myFunction() {
  var y = document.getElementById("VAS").value;
  var z = document.getElementById("number").value;
  var a = document.getElementById("VGS").value;
  var c = document.getElementById("VAF").value;
  var d = document.getElementById("VTS").value;


  if (value == VGS) {
  var x = a * z;
  document.getElementById("value").innerHTML = x;
  }
  else if (value == VAS) {
  var x = y * z;
  document.getElementById("value").innerHTML = x;
  }




  }
  </script>

Answer 1

您需要比较选择的值，而不是选项的值。以下是我修复您的 JavaScript 代码的方法:

function myFunction() {
    var a = parseInt(document.getElementById("VAS").parentNode.value);
    var z = parseInt(document.getElementById("number").value);
    var x = a * z;
    document.getElementById("value").innerHTML = x;
}

完整的工作演示:

function myFunction() {
    var a = parseInt(document.getElementById("VAS").parentNode.value);
    var z = parseInt(document.getElementById("number").value);
    var x = a * z;
    document.getElementById("value").innerHTML = x;
}

<td>
  <select>


    <option id="VAS" value="70">VAS</option>
    <option id="VTS" value="80">VTS</option>
    <option id="VAF" value="60">VAF</option>
    <option id="VGS" value="40">VGS</option>
  </select>
</td>
<td>
  <input type="number" id="number" name="number">
</td>
<td>

  <button onclick="myFunction()"> Total Value</button>
  <br/>
  <br/>


  <p id="value"></p>

编辑:

要自动执行此操作，请在数字字段中使用 oninput，如下所示:

<input type="number" id="number" name="number" oninput="myFunction()" />

演示:

function myFunction() {
    var a = parseInt(document.getElementById("VAS").parentNode.value);
    var z = parseInt(document.getElementById("number").value);
    var x = a * z;
    document.getElementById("value").innerHTML = x;
}

<td>
  <select>


    <option id="VAS" value="70">VAS</option>
    <option id="VTS" value="80">VTS</option>
    <option id="VAF" value="60">VAF</option>
    <option id="VGS" value="40">VGS</option>
  </select>
</td>
<td>
  <input type="number" id="number" name="number" oninput="myFunction()">
</td>
<td>
  <br/>
  <br/>


  <p id="value"></p>