Why the buttons get disappeared when clicking them?

Stack Overflow Asked by Kiyubi on December 5, 2021

I was trying to display a number on a div whenever I clicked a button. So, I created 2 buttons, one for deducting ‘1’ from the number and another one was for incrementing the number. But whenever I clicked on the decrement button, it never even worked but the increment button, it did the work once and then both of the buttons got disappeared

<!DOCTYPE html>
<html>
<head>
    <title>
        hello
    </title>
    <style type="text/css">
        .container
         {
            height:500px;
            width: 500px;
            background-color: #494d5f;
            position: relative;
            color:white;
            font-size: 50px;
            text-align: center;
            line-height:500px; 
         }
        .left,.right
        {
            position: absolute;
            top:50%;
            color: black;
        }
        .right
        {
            right: 0;
        }
        .left
        {
            left:0;
        }
    </style>
</head>
<body>
    <div class="container">1
        <button class="left" onclick="minus()"><</button>
        <button class="right" onclick="plus()">></button>

    </div>
    <script type="text/javascript">
        var selected=1;
         function minus()
             {
               selected-=1;
               document.querySelector(".container").textContent=selected;
             }
         function plus()
             {
               selected+=1;
               document.querySelector(".container").textContent=selected;
             } 
    </script>
</body>
</html>

css html javascript

2 Answers

It replaces the content of the container with whatever the value of selected, which also means it removes the buttons as they are inside container. I suggest to separately enclose the content you want to change.

<!DOCTYPE html>
<html>

<head>
  <title>
    hello
  </title>
  <style type="text/css">
    .container {
      height: 500px;
      width: 500px;
      background-color: #494d5f;
      position: relative;
      color: white;
      font-size: 50px;
      text-align: center;
      line-height: 500px;
    }
    
    .left,
    .right {
      position: absolute;
      top: 50%;
      color: black;
    }
    
    .right {
      right: 0;
    }
    
    .left {
      left: 0;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main-content">1</div>
    <button class="left" onclick="minus()"><</button>
    <button class="right" onclick="plus()">></button>

  </div>
  <script type="text/javascript">
    var selected = 1;

    function minus() {
      selected -= 1;
      document.querySelector(".main-content").textContent = selected;
    }

    function plus() {
      selected += 1;
      document.querySelector(".main-content").textContent = selected;
    }
  </script>
</body>

</html>

Answered by Karl L on December 5, 2021

Because you are replacing the content of container, you must have wrap the numbeer in another element like this:

<div class="container">
    <span id="number">1</span>
    <button class="left" onclick="minus()"><</button>
    <button class="right" onclick="plus()">></button>
</div>

And in the function:

<script type="text/javascript">
    var selected=1;
     function minus()
         {
           selected-=1;
           document.querySelector("#number").textContent=selected;
         }
     function plus()
         {
           selected+=1;
           document.querySelector("#number").textContent=selected;
         } 
</script>

Snippet:

<!DOCTYPE html>
<html>
<head>
    <title>
        hello
    </title>
    <style type="text/css">
        .container
         {
            height:500px;
            width: 500px;
            background-color: #494d5f;
            position: relative;
            color:white;
            font-size: 50px;
            text-align: center;
            line-height:500px; 
         }
        .left,.right
        {
            position: absolute;
            top:50%;
            color: black;
        }
        .right
        {
            right: 0;
        }
        .left
        {
            left:0;
        }
    </style>
</head>
<body>
    <div class="container">
        <span id="number">1</span>
        <button class="left" onclick="minus()"><</button>
        <button class="right" onclick="plus()">></button>

    </div>
    <script type="text/javascript">
        var selected=1;
         function minus()
             {
               selected-=1;
               document.querySelector("#number").textContent=selected;
             }
         function plus()
             {
               selected+=1;
               document.querySelector("#number").textContent=selected;
             } 
    </script>
</body>
</html>

Answered by Martin Gainza Koulaksezian on December 5, 2021

Add your own answers!

Ask a Question

Get help from others!