जब मैं जांचता हूं कि यह केवल 1 तत्व में कुछ मान जोड़ सकता है, लेकिन मुझे नहीं पता कि विभिन्न तत्वों से कैसे जोड़ना है और इसे कम करना है।
var y = 1;
function calc() {
if (document.getElementById("t1").checked) {
document.getElementById("demo").innerHTML = z = y + 1;
if (document.getElementById("t1").reversed) {
document.getElementById("demo").innerHTML = z = y - 1;
}
}
if (document.getElementById("t2").checked) {
document.getElementById("demo").innerHTML = z = y + 1;
if (document.getElementById("t2").reversed) {
document.getElementById("demo").innerHTML = z = y - 1;
}
}
}
<input id="t1" type="checkbox" name="model" value="a1" onclick="calc();">a1
<input id="t2" type="checkbox" name="model" value="a1" onclick="calc();">a2
<h1 id="demo"></h1>
4 जवाब
समझ लिया! क्या आपका यह मतलब था?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="t1" type="checkbox" name="model" value="a1" onclick="calc(this);">a1
<input id="t2" type="checkbox" name="model" value="a1" onclick="calc(this);">a2
<h1 id="demo">0</h1>
<script>
var y = 1;
var z=0;
function calc(e) {
if(e.checked)
z = z + 1;
else
z = z - 1;
document.getElementById("demo").innerText = z;
}
</script>
</body>
</html>
if(!e.checked)
जैसे कुछ का उपयोग करें यदि आप चेक बॉक्स को चेक करना चाहते हैं तो चेक नहीं किया गया है और if(e.checked)
चेक किया गया है, प्रतीक !
थोड़े महत्वपूर्ण है: डी
इसके अलावा, मैंने आपके ईवेंट में this
को जोड़ा है, प्रत्येक इनपुट तत्व के लिए क्लिक करते समय तेजी से लक्षित तत्व प्राप्त करें।
<input id="t1" type="checkbox" name="model" value="a1" onclick="calc(this);">a1
यदि आप चाहते हैं कि z विश्व स्तर पर उपयोग किया जाए तो फ़ंक्शन के बाहर वैश्विक चर घोषित किया जाता है
एक काउंटर के साथ। मान बढ़ाना या घटाना। आउटपुट एलिमेंट के innerHTML
को मान असाइन करें।
const demo = document.getElementById("demo");
let makeCounter = function() {
let privateCounter = 0;
function changeBy(val) {
privateCounter += val;
}
return {
value: function() {
return privateCounter;
},
increment: function() {
changeBy(1);
},
decrement: function() {
changeBy(-1);
}
}
};
let myCounter = makeCounter();
function changeValue(el) {
el.checked ? myCounter.increment() : myCounter.decrement();
demo.innerHTML = myCounter.value();
}
<input id="t1" type="checkbox" name="model" value="a1" onclick="changeValue(this);">a1
<input id="t2" type="checkbox" name="model" value="a1" onclick="changeValue(this);">a2
<h1 id="demo"></h1>
यहां बिना किसी चर के एक और दृष्टिकोण है। हर बार चेकबॉक्स पर क्लिक करने पर गिनती फिर से स्थापित हो जाती है:
const qs=s=>document.querySelector(s),
qsa=s=>document.querySelectorAll(s);
qs("body").addEventListener("click",ev=>ev.target.name==='model'
? qs('#demo').innerText=qsa('input:checked').length
: 0);
<input id="t1" type="checkbox" name="model" value="a1">a1
<input id="t2" type="checkbox" name="model" value="a2">a2
<h1 id="demo">0</h1>
मैंने qs()
और qsa()
को कोड की पठनीयता में सुधार के लिए शॉर्टकट फ़ंक्शन के रूप में परिभाषित किया है।