时间戳

首页 > 解决方案 > 将选定的选项从 HTML 转换为 JavaScript，并使用 If 语句创建数字变量

javascript - 将选定的选项从 HTML 转换为 JavaScript，并使用 If 语句创建数字变量

问题描述

我正在尝试在 HTML 中使用我的选择，引入值，然后根据值，为变量分配不同的值。这是一个订单表格，最终将根据客户选择的选项提供更新的价目表。

逻辑如下：

此时我可以让它返回初始值，但是一旦我调用条件语句，它就不会返回任何东西。

我没有收到任何错误，所以我有点困惑。

function fn1() {
  let cpu = document.getElementById("cpuOption").value;
  return cpu;
  cpuPrice = 0;
  if (cpu == cpu_1) {
    cpuPrice = 200;
  } else if (cpu == cpu_2) {
    cpuPrice = 300;
  } else {
    cpuPrice = 400;
  }

  document.getElementById("test").innerHTML = cpuPrice;
}
<form>
  <label for="cpuOption">Desired CPU Configuration</label>
  <br>
  <select id="cpuOption" onchange="fn1()">
    <option value="none" selected>select</option>
    <option value="cpu_1">cpu-1</option>
    <option value="cpu_2">cpu-2</option>
    <option value="cpu_3">cpu-3</option>
  </select>
</form>

<h2>Check it out!</h2>
<button onclick="fn1()">Click me</button>
<div id="test"></div>

标签： javascripthtmlformsconditional-statements

解决方案

正如@clod9353 所提到的，第一个错误是您return早早地进入了您的fn1()函数。返回后的代码不会被执行。

第二个错误是将select值与不存在的变量进行比较。变量喜欢cpu_1和cpu_2不存在，您应该将值与字符串进行比较，例如"cpu_2".

下面的代码应该按预期工作：

function fn1() {
  let cpu = document.getElementById("cpuOption").value;
  let cpuPrice = 0;
  
  if (cpu === 'cpu_1') {
    cpuPrice = 200;
  } else if (cpu === 'cpu_2') {
    cpuPrice = 300;
  } else {
    cpuPrice = 400;
  }

  document.getElementById("test").innerHTML = cpuPrice;
}
<form>
  <label for="cpuOption">Desired CPU Configuration</label>
  <select id="cpuOption" onchange="fn1()">
    <option value="none" selected>select</option>
    <option value="cpu_1">cpu-1</option>
    <option value="cpu_2">cpu-2</option>
    <option value="cpu_3">cpu-3</option>
  </select>
</form>

<h2>Check it out!</h2>
<button onclick="fn1()">Click me</button>
<div id="test"></div>

推荐阅读