javascript - 如何为带有数值的复选框制作 JS If Then 语句？

Question

我正在尝试为我的网站创建一个基本的定价计算器，以便客户可以获得基本的成本估算。对于部分定价，我尝试制作复选框，如果选中它们，则会在总数中添加例如 100。但是，如果未选择，则不会将任何内容添加到总数中。我一直在尝试使用下面的代码，但我绝对没有做正确的事情。预先感谢您的帮助。我是 JS 和 HTML 世界的新手，所以我很感谢您的帮助!

我在下面包含了我当前的 javascript。我希望数字 1 和数字 2 是文本框，数字 3 是复选框。

var button = document.getElementById("submitButton");
button.addEventListener("click", function() {

var num1 = document.getElementById('Number1').value;

var num2 = document.getElementById('Number2').value;

var num3 = if (document.getElementById('Number3').value == 1) 
{ 
document.getElementById('Number3').value = '100'; 
} 
else if (document.getElementById('Number3').value == 0) 
{ 
value = '0'; 
} ;

var answer = parseInt(num1) + parseInt(num2) + parseInt(num3);

document.getElementById('Answer').innerHTML = answer;



}, true);

Answer 1

您的 JS 中有多个错误。第一个来自:

var num3 = if (document.getElementById('Number3').value == 1) 
{ 
    document.getElementById('Number3').value = '100'; 
} 
else if (document.getElementById('Number3').value == 0) 
{ 
    value = '0'; 
} ;

这是一个语法错误。您可以使用三元运算符:

var num3 = document.getElementById('Number3').checked ? 100 : 0;
// condition ? value to return if true : value to return if false

您还需要检查输入的值是否未定义，并为其分配默认值:

var num1 = document.getElementById('Number1').value || 0;
var num2 = document.getElementById('Number2').value || 0;

查看工作示例:

var button = document.getElementById("submitButton");

button.addEventListener("click", function() {
  var num1 = document.getElementById('Number1').value || 0;
  var num2 = document.getElementById('Number2').value || 0;
  var num3 = document.getElementById('Number3').checked ? 100 : 0;

  var answer = parseInt(num1) + parseInt(num2) + num3;

  document.getElementById('Answer').innerHTML = answer;
}, true);

<input id="Number1"/>
<input id="Number2"/>
<input id="Number3" type="checkbox"/>
<button id="submitButton">Go</button>
<div id="Answer"></div>