Question

<label>
	Total
	<input value="£0.00" readonly="readonly" type="text" id="total"/>
</label>

以下是我正在建设的网站的html和js。我试图让所选择的tem的总值增加，这将是单选按钮中的1项。但是每当我选择一个选项时，总价格保持在0英镑。我是js的新手，我遇到了麻烦。任何帮助将不胜感激！

function totalIt() {
  var input = document.getElementsByName("size");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "£" + total.toFixed(2);
}

Small (£3.99)<input type="radio" name="size" id="s1" value="3.99" onclick="totalIt()"/>
Medium (£4.99)<input type="radio" name="size" id="s2" value="4.99" onclick="totalIt()"/>
Large (£5.99)<input type="radio" name="size" id="s3" value="5.99" onclick="totalIt()"/>

Answer 1

更改此document.getElementById("total").value = "£" + total.toFixed(2);

阅读

document.getElementById("total").innerHTML = "£" + total.toFixed(2);

您需要使用innerHTML打印到屏幕。 .value得到该元素的值。

Answer 2

部分问题是缺少#total元素（可能是input，假设您正在尝试更改其值）。

但从功能和名称来判断element，我假设你还希望total在你点击其中一个无线电输入时增加。为此，您需要将total变量移至函数外部，这将创建closure（即，total变量将在调用totalIt()之间保留其值）。请注意，我添加了break，因为一旦找到您选中的收音机盒，就无需继续检查其他收音机盒。

// Note this is outside the function
var total = 0;

function totalIt() {
  var input = document.getElementsByName("size");
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
      // exit loop once checked radio is found
      break;
    }
  }
  document.getElementById("total").value = "£" + total.toFixed(2);
}

Small (£3.99)<input type="radio" name="size" id="s1" value="3.99" onclick="totalIt()"/>
Medium (£4.99)<input type="radio" name="size" id="s2" value="4.99" onclick="totalIt()"/>
Large (£5.99)<input type="radio" name="size" id="s3" value="5.99" onclick="totalIt()"/>

<div>
  Total <input type="text" readonly id="total" value="£0.00"/>
</div>

或者，您可以阅读＆amp;解析input#total元素的值，以防有理由说明为什么你不能在这里使用闭包。

function totalIt() {
  var input = document.getElementsByName("size");
  var total = parseFloat(document.getElementById("total").value.slice(1));
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
      // exit loop once checked radio is found
      break;
    }
  }
  document.getElementById("total").value = "£" + total.toFixed(2);
}

Small (£3.99)<input type="radio" name="size" id="s1" value="3.99" onclick="totalIt()"/>
Medium (£4.99)<input type="radio" name="size" id="s2" value="4.99" onclick="totalIt()"/>
Large (£5.99)<input type="radio" name="size" id="s3" value="5.99" onclick="totalIt()"/>

<div>
  Total <input type="text" readonly id="total" value="£0.00"/>
</div>

在上述两种情况中，您实际上并不需要无线电输入或环路，因为无线电基本上就像按钮一样;您可以使用常规按钮替换它们，并使用参数来调用totalIt()（可以大大简化）。

如果您实际上对运行总计不感兴趣并且只想在任何给定时间显示已检查项目的总数，那么您真的在寻找一个复选框输入，然后您不必担心闭包，解析或休息。

function totalIt() {
  var input = document.getElementsByName("size");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "£" + total.toFixed(2);
}

Small (£3.99)<input type="checkbox" name="size" id="s1" value="3.99" onclick="totalIt()"/>
Medium (£4.99)<input type="checkbox" name="size" id="s2" value="4.99" onclick="totalIt()"/>
Large (£5.99)<input type="checkbox" name="size" id="s3" value="5.99" onclick="totalIt()"/>

<div>
  Total <input type="text" readonly id="total" value="£0.00"/>
</div>

将价格添加到我的选择选项javascript / html

2 个答案: