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

您还需要检查输入值是否为undefined并为其指定默认值：

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

参见工作示例：

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

而不是：

var num3 = if (document.getElementById('Number3').value == 1)

使用：

if(document.getElementById("Number3").checked){
//add the values here 
}

希望这有帮助

如何为具有数值的复选框创建JS If Then语句？

2 个答案: