Question 45173 in Html Question posted in
Some basic documentation can be found here.

Buttons disappearing after clicking on them Js/html

`Hello there, I’m trying to write a counter code in which I have two buttons (Increase and Decrease), I created the functions, and it works but the buttons disappear.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buttons practice</title>
    <script src="/JavaScript/buttons_practice.js" defer></script>
</head>
<body>

    <button id="todo-button" onclick="DoneChange()">Changing Text</button>

    <div id="counter">0
        <button id="up">Up</button>
        <button id="down">Down</button>
    </div>

    <div id="counter">0</div>


    
</body>
</html>

    const Counter = document.getElementById('counter');
    const Up = document.getElementById('up');
    const Down = document.getElementById('down');
    let count = 0;


    Up.addEventListener('click', function Increase(){
        count = count + 1;
        UpdateCounter();
        

    });

    Down.addEventListener('click', function Decrease() {
        count = count -1;
        UpdateCounter();

    });

    function UpdateCounter() {
        Counter.innerText= count;
    }

I was reading some similar questions, but I couldn’t figure it out. Some answers aimed to the InnerText to be the Issue, however I can see this code works, I’m basically using the event listener so I can have Html exclusive to Html, it’s modular and better at reading the code I think.

<div id="counter">0</div>
<button onclick="countUp()">Up</button>
<button onclick="countDown()">Down</button>
<script>
  let count = 0;

  function countUp() {
    count = count + 1;
    updateCount();
  }

  function countDown() {
    count = count - 1;
    updateCount();
  }
  function updateCount() {
    let counter = document.getElementById('counter');
    counter.innerText = count;
  }
</script>
Tags:

2

Answers


  1. 0

    The buttons are inside the counter. Consequently, when you rewrite the contents of the counter (with innerText) you replace the buttons.

    Don’t put the buttons inside the counter.

    Login or Signup to reply.
  2. 0

    You have two elements with id counter in this block:

    <div id="counter">0
    <button id="up">Up</button>
    <button id="down">Down</button>
</div>

<div id="counter">0</div>

    When you do

    Counter.innerText= count;

    you override everything that you have within the first counter div that contains buttons, and as a result, they disappear.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search