如何解决如果我将一个onclick事件中的两个功能组合在一起，是否可以创建警报？ 纯Javascript
新手在这里。我真的在JavaScript方面苦苦挣扎，并且正在为自己制定每日目标日历，只是为了练习。我有5个复选框和一个按钮，在单击时会添加选中的框总数 我拥有的第一个功能运行良好： 有了第二个功能，我想从第一个功能获取总计数，并显示一条警报消息。由于某种原因（可能很明显），我无法弹出警报。 有人可以告诉我我在做什么错吗？
let count;
function checkboxes() {
var inputElems = document.getElementsByTagName("input"),count = 0;
for (var i = 0; i < inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
count++;
}
}
console.log(count);
}
function goalDigger() {
let comp = count;
if (comp == 5) {
alert("5 star day!");
} else if (comp == 4) {
alert("4 for the win! Hang your hat on that!");
} else if (comp == 3) {
alert("Three is ok sometimes..");
} else if (comp == 2) {
alert("Well,you got out of bed today so..good job!");
} else if (comp == 1) {
alert("What happened??");
}
}<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="learning">
<label class="custom-control-label" for="defaultUnchecked">30 Minutes of Learning</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="workout">
<label class="custom-control-label" for="defaultUnchecked">Workout</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="facebook">
<label class="custom-control-label" for="defaultUnchecked">NO Facebook App</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="diet">
<label class="custom-control-label" for="defaultUnchecked">Clean Eating</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="meditate">
<label class="custom-control-label" for="defaultUnchecked">Meditation</label>
</div>
<button onclick="checkboxes(); goalDigger()">Tally me Banana!</button>解决方法
因为您要在函数内部重新声明count，所以它不会更改全局变量
var inputElems = document.getElementsByTagName("input"),count = 0; <--- declares count as a new variable
将其更改为
var inputElems = document.getElementsByTagName("input");
count = 0;
更好的是，让一个函数调用另一个
function checkboxes() {
var inputElems = document.getElementsByTagName("input"),count = 0;
for (var i = 0; i < inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
count++;
}
}
return count;
}
function goalDigger() {
let comp = checkboxes();
if (comp == 5) {
alert("5 star day!");
} else if (comp == 4) {
alert("4 for the win! Hang your hat on that!");
} else if (comp == 3) {
alert("Three is ok sometimes..");
} else if (comp == 2) {
alert("Well,you got out of bed today so..good job!");
} else if (comp == 1) {
alert("What happened??");
}
}
- 不建议使用内联事件处理程序
- 您需要第二个函数中的复选框数量，但是由于您的
var ...,count的范围声明了一个新变量，而该变量的作用域是该函数的局部范围，而不是更新全局变量，因此第二个函数无法使用count由let count在函数外部定义。
这是一个只有一个功能的简单版本
// have an array of texts
const texts = ["Nothing checked","What happened??","Well,you got out of bed today so..good job!","Three is ok sometimes..","4 for the win! Hang your hat on that!","5 star day!"]
window.addEventListener("load",function() { // when page loads
document.getElementById("sumBut").addEventListener("click",function() { // clicking the button
const comp = document.querySelectorAll(".custom-checkbox input:checked").length; // count all checked boxes
alert(texts[comp]); // alert the matching text
})
})<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="learning">
<label class="custom-control-label" for="defaultUnchecked">30 Minutes of Learning</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="workout">
<label class="custom-control-label" for="defaultUnchecked">Workout</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="facebook">
<label class="custom-control-label" for="defaultUnchecked">NO Facebook App</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="diet">
<label class="custom-control-label" for="defaultUnchecked">Clean Eating</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="meditate">
<label class="custom-control-label" for="defaultUnchecked">Meditation</label>
</div>
<button id="sumBut" type="button">Tally me Banana!</button>,
当count为0时没有其他条件：）
let count;
function checkboxes() {
var inputElems = document.getElementsByTagName("input"),count = 0;
for (var i = 0; i < inputElems.length; i++) {
if (inputElems[i].type == "checkbox" && inputElems[i].checked == true) {
count++;
}
}
console.log(count);
}
function goalDigger() {
let comp = count;
if (comp == 5) {
alert("5 star day!");
} else if (comp == 4) {
alert("4 for the win! Hang your hat on that!");
} else if (comp == 3) {
alert("Three is ok sometimes..");
} else if (comp == 2) {
alert("Well,you got out of bed today so..good job!");
} else if (comp == 1) {
alert("What happened??");
} else { alert('you are here'); }
}<button onclick="checkboxes(); goalDigger()">Tally me Banana!</button>,
- 您使用过按钮，但是您的js代码用于输入。
- 在代码按钮上，点击计数从0开始，然后计数将更改为+1。
- 没有类似复选框的类型。这是我发现的“ nodeName：按钮”。
希望此代码将对您有所帮助。
var count = 0;
function checkboxes() {
var inputElems = document.getElementsByTagName("button");
//console.log(inputElems);
for (var i = 0; i < inputElems.length; i++) {
if (inputElems[i].nodeName == "BUTTON") {
count++;
}
}
// console.log(count);
}
function goalDigger() {
let comp = count;
if (comp == 5) {
alert("5 star day!");
} else if (comp == 4) {
alert("4 for the win! Hang your hat on that!");
} else if (comp == 3) {
alert("Three is ok sometimes..");
} else if (comp == 2) {
alert("Well,you got out of bed today so..good job!");
} else if (comp == 1) {
alert("What happened??");
}
}<button onclick="checkboxes(); goalDigger()">Tally me Banana!</button>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。