मैं कुछ बहुत ही सरल बनाने की कोशिश कर रहा हूं, हर बार जब मैं बटन पर क्लिक करता हूं तो यह एचटीएमएल के अंदर की मात्रा को 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
}
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

4 जवाब

सबसे बढ़िया उत्तर

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

  • आपको 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
  1. आपको अपने टैग में चयनकर्ता को परिभाषित करने की आवश्यकता है: <div class="counter">0</div>id="counter" जोड़ें

  2. फिर 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

इसके बजाय इसे आजमाएं। 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
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