javascript - 如果我从一个 onclick 事件中组合两个功能，我可以创建警报吗？（纯 Javascript）

Question

新手来了 我真的在用 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>

标签： javascriptalert

Answer 1

因为您在函数内部重新声明计数，所以它不会更改全局变量

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??");
  }
}