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

您的值是数字，因此值永远不会包含 VAS。此外，字符串需要用引号括起来，因此您的 if 语句将如下所示：

if(a == "VAS")

但该值包含数字，因此实际上应该是：

if(a == "40")

注意：除非您转换它们，否则这些值都是字符串。

Answer 2

您需要比较 select 的值，而不是选项的值。以下是我修复您的 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>

Javascript 将选项链接到 else if

Javascript linking options to else if

html

javascript

css

options

编辑：