将所选选项从JavaScript中获取并使用If语句创建数值变量
将所选选项从JavaScript中获取并使用If语句创建数值变量
提问于 2021-01-07 20:20:54
我试图在HTML中使用我的select，输入值，然后根据值将一个不同的值赋给变量。这是一个订单，最终会给出一个更新的价目表，根据客户选择的选项。
逻辑如下：
- 选择一个选项
- 该选项的值根据该值分配给变量
- ，然后使用条件语句
将一个数值分配给该变量
此时，我可以让它返回初始值，但是一旦调用了条件语句，它就不会返回任何内容。
我没有收到任何错误，所以我只是有点困惑。
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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-07 20:37:51
我觉得这可能会有帮助。如果有的话告诉我。这段代码有一些不必要的代码片段。
<body>
<form>
<label for="cpuOption">Desired CPU Configuration</label>
<br>
<select id="cpuOption">
<option value="none" selected>select</option>
<option id = "cpu_1"value="cpu_1">cpu-1</option>
<option id ="cpu_2" value="cpu_2">cpu-2</option>
<option id ="cpu_3"value="cpu_3">cpu-3</option>
</select>
<br><br>
</form>
<button onclick="fn1()">Click me</button>
<script>
function fn1() {
let cpu = document.getElementById("cpuOption").value;
var cpu_1 = document.getElementById("cpu_1").value
var cpu_2 = document.getElementById("cpu_2").value
;
cpuPrice = 0;
if (cpu == cpu_1) {
cpuPrice = 200;
}
else if (cpu == cpu_2) {
cpuPrice = 300;
}
else if (cpu == cpu ) {
cpuPrice = 0;
}
else {
cpuPrice = 400;
}
document.getElementById("test").innerHTML = cpuPrice;
}
</script>
<h2>Check it out!</h2>
<div id="test"></div>
</body>
Stack Overflow用户
发布于 2021-01-07 21:34:57
第一个错误，正如@ your 9353所提到的，是您在return函数中的早期。返回后的代码不会被执行。
第二个错误是将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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65619379
复制相关文章
相似问题
腾讯云开发者
