हर क्लिक पर बटन इंक्रीमेंट नहीं बना सकता

Question

मैं कुछ बहुत ही सरल बनाने की कोशिश कर रहा हूं, हर बार जब मैं बटन पर क्लिक करता हूं तो यह एचटीएमएल के अंदर की मात्रा को 1 से बढ़ाता है, लेकिन यह काम नहीं करता है और मुझे नहीं पता क्यों:

<!DOCTYPE html>
<head>
    
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="frame">
        <div class="counter">0</div>
        <button id="increment" onclick="adding()"> Click</button>
        <button id="reset"> Reset</button>
    </div>
    <script src="test.js"></script>
</body>
</html>

यह जावास्क्रिप्ट है:

let increment = document.getElementById("increment")
let counter = document.getElementById("counter")
let count = 0

increment.addEventListener("click",adding)

function adding() {
    count +=1
    counter.textContent += count
}

javascript addeventlistener

1

tsuri he 6 जिंदा 2022, 12:54

आपको counter.textContent = count को नहीं counter.textContent += count को ओवरराइड करना होगा

–

Yasser CHENIK

6 जिंदा 2022, 12:57

आपके पास counter की आईडी वाला कोई तत्व भी नहीं है। आपके पास onclick="adding()" होने की भी आवश्यकता नहीं है क्योंकि इसे addEventListener() के माध्यम से जोड़ा जाता है

–

Nick Parsons

6 जिंदा 2022, 12:57

Answer 1

आपके कोड में कई चीजें गलत हैं।

आपको div के id को class के बजाय counter पर सेट करना होगा। जैसा कि आप जावास्क्रिप्ट में इसके id का उपयोग करके तत्वों को पुनः प्राप्त कर रहे हैं।
आप अपने कोड में दो बार बटन के क्लिक इवेंट को बाध्य कर रहे हैं। एक बार HTML में onclick='adding()' के साथ और दूसरी बार जावास्क्रिप्ट में increment.addEventListener("click",adding) के साथ, जिसके कारण यह प्रत्येक क्लिक पर दो बार वृद्धि करता है।

let increment = document.getElementById("increment")
let counter = document.getElementById("counter")
let count = 0

function adding() {
    counter.textContent = ++count
}

<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="frame">
        <div id="counter">0</div>
        <button id="increment" onclick="adding()"> Click</button>
        <button id="reset"> Reset</button>
    </div>
    <script src="test.js"></script>
</body>
</html>

0

K450 6 जिंदा 2022, 13:09

Answer 2

आपको अपने टैग में चयनकर्ता को परिभाषित करने की आवश्यकता है: <div class="counter">0</div> । id="counter" जोड़ें
फिर counter.textContent = count++ के बजाय counter.textContent += count+=1 बदलें

let increment = document.getElementById("increment")
let counter = document.getElementById("counter")
let count = 0

increment.addEventListener("click",adding)

function adding() {
    counter.textContent = count
}

<!DOCTYPE html>
<head>
    
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="frame">
        <div id="counter" class="counter">0</div>
        <button id="increment" onclick="adding()"> Click</button>
        <button id="reset"> Reset</button>
    </div>
    <script src="test.js"></script>
</body>
</html>

0

Maik Lowrey 6 जिंदा 2022, 12:56

Answer 3

इसके बजाय इसे आजमाएं। onclick और addEventListener का उपयोग करके फ़ंक्शन को दो बार चलाया जाता है, इसलिए वेतन वृद्धि हमेशा +2 होती है।

दो ट्रिगर में से केवल एक चुनें

let increment = document.getElementById("increment")
let counter = document.getElementById("counter")
let count = 0

increment.addEventListener("click",adding)

function adding() {
    count +=1
    counter.textContent = count
}

<!DOCTYPE html>
<head>
    
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="frame">
        <div id="counter" class="counter">0</div>
        <button id="increment"> Click</button>
        <button id="reset"> Reset</button>
    </div>
    <script src="test.js"></script>
</body>
</html>

0

Abdelraouf Ferah 6 जिंदा 2022, 13:01

Answer 4

const increment = document.getElementById("increment")
const reset = document.getElementById("reset")
const counter = document.getElementById("counter")
let count = 0

// correcting double adding of click handler
// increment.addEventListener("click",adding)
// but adding it for reset
reset.addEventListener("click",resetCounter)

function adding() {
    count++
    counter.textContent = count // not += 
}

// Added function for reset of counter
function resetCounter () {
    count = 0
    counter.textContent = count
}

<!DOCTYPE html>
<html><!-- Added html start tag -->
<head>        
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="frame">
        <div id="counter" class="counter">0</div>
        <button id="increment" onclick="adding()"> Click</button>
        <button id="reset"> Reset</button>
    </div>
    <script src="test.js"></script>
</body>
</html>

0

jefi 6 जिंदा 2022, 13:45

हर क्लिक पर बटन इंक्रीमेंट नहीं बना सकता

4 जवाब

संबंधित सवाल

नए सवाल