Question

0

191

Visualizações

Cant create button increment by one every click

I'm trying to build something very simple, every time i click the button it increments the amount inside the html by 1, but it doesn't work and i don't know why:

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 class="counter">0</div>
        <button id="increment" onclick="adding()"> Click</button>
        <button id="reset"> Reset</button>
    </div>
    <script src="test.js"></script>
</body>
</html>

about 4 years ago · Juan Pablo Isaza

3 Respostas

Responde à pergunta

0

You need to define the selector in you tag: <div class="counter">0</div> . Add id="counter"
Then change counter.textContent = count++ instead 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>

about 4 years ago · Juan Pablo Isaza Relatório

0

Try this instead. using onclick and the addEventListener make the function run twice, so the increment is always +2.

choose only one of the two triggers

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>

about 4 years ago · Juan Pablo Isaza Relatório

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-07-05T12:19:19.488Z

There are multiple things wrong with your code.

You need to set id of the div to counter instead of its class. As you are retrieving the elements using its id in the javascript.
You are binding the click event of the button twice in your code. Once in HTML with onclick='adding()' and a second time in javascript with increment.addEventListener("click",adding), which causes it to increment twice on each click.

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

191

Cant create button increment by one every click

3 Respostas

0

0

0

Encontrar trabalhos remotos

Andres GPT