如何解决一个想在我的代码中使用for循环,但我不知道怎么可能
我将要学习编程,并且已经创建了练习表格以测试我的知识。复选框允许用户选择他们的汉堡想要额外的配料。在javascript中,我可以使用getElementById命令获得额外的一流价值。该代码可以正常工作,但是我需要for循环来遍历所有元素。我需要用HTML代码编写的复选框的索引才能在javascript中使用。
<div class="extra">
<div>
<input value="250" type="checkbox" name="cheese" id="cheese">
<label for="cheese">Sajt (+250 Ft)</label>
</div>
<div>
<input value="600"type="checkbox" name="meat" id="doublemeat">
<label for="doublemeat">+Hús (+600 Ft)</label>
</div>
<div>
<input value="250"type="checkbox" name="onion" id="onion">
<label for="onion">Hagyma (+250 Ft)</label>
</div>
<div>
<input value="450"type="checkbox" name="bacon" id="bacon">
<label for="bacon">Bacon (+450 Ft)</label>
</div>
<div>
<input value="600"type="checkbox" name="coleslaw" id="coleslaw">
<label for="coleslaw">Coleslaw saláta (+600)</label>
</div>
</div>
这在javascript中
var extra=0;
if (document.getElementById("cheese").checked){
extra=extra+parseInt(cheese.value)}
if (document.getElementById("doublemeat").checked){
extra=extra+parseInt(doublemeat.value)}
if (document.getElementById("onion").checked){
extra=extra+parseInt(onion.value)}
if (document.getElementById("bacon").checked){
extra=extra+parseInt(bacon.value)}
if (document.getElementById("coleslaw").checked){
extra=extra+parseInt(coleslaw.value)
}
解决方法
您需要将所有元素组成一个数组,然后才能使用JavaScript的reduce
方法。
这是一个例子:
const elements = [
document.getElementById("cheese"),document.getElementById("doublemeat"),document.getElementById("onion"),document.getElementById("bacon"),document.getElementById("coleslaw")
];
const extra = elements.reduce((total,element) => {
if (element.checked) {
return total + parseInt(element.value);
}
return total;
},0);
.reduce
方法将数组简化为新值。在这种情况下,我们从0开始,如果选中该元素,则返回sum +值。
您可以阅读有关MDN上的reduce的更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
在您的JavaScript中,最好这样做:
const elements = Array.from(document.querySelectorAll('.extra > div > input'))
这将使您不必手动获取所有元素。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。