नौसिखिया यहाँ। मैं वास्तव में जावास्क्रिप्ट के साथ संघर्ष कर रहा हूं और सिर्फ अभ्यास के लिए अपने लिए एक दैनिक लक्ष्य कैलेंडर पर काम कर रहा हूं। मेरे पास 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>
0
user14356328 23 अक्टूबर 2020, 21:51

4 जवाब

सबसे बढ़िया उत्तर
  1. इनलाइन ईवेंट हैंडलर का उपयोग करने की अनुशंसा नहीं की जाती है
  2. आपको दूसरे फ़ंक्शन में चेकबॉक्स की संख्या की आवश्यकता है, लेकिन आपके var ... , 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>
0
mplungjan 24 अक्टूबर 2020, 00:00
  1. आपने बटन का उपयोग किया है लेकिन आपका जेएस कोड इनपुट के लिए है।
  2. आपके कोड बटन पर क्लिक गिनती 0 से शुरू होती है और फिर गिनती +1 बदलने वाली है।
  3. चेकबॉक्स जैसा कोई प्रकार नहीं है। यह एक "नोडनाम: बटन" है जो मैंने पाया।

आशा है कि यह कोड आपकी मदद करेगा।

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>
0
Ishita Ray 23 अक्टूबर 2020, 22:38

गिनती 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>
0
Avigdor Susana 23 अक्टूबर 2020, 22:07

क्योंकि आप फ़ंक्शन के अंदर गिनती को फिर से घोषित कर रहे हैं, यह वैश्विक चर को नहीं बदलता है

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??");
  }
}
1
epascarello 23 अक्टूबर 2020, 21:56