How to make buttons that increment and decrement a value when clicked?

javascript jquery html dom

18,396

Solution 1

The document.write is the problem. It only works before the browser is done loading the page completely. After that, document.write doesn't work. It just deletes all of the existing page contents.

Your first document.write is executed before you the page has loaded completely. This is why you should see the 0 next to the two buttons.

Then however, the page has loaded. Clicking on a button causes the event handler to be executed, so document.write will be called, which doesn't work at that point, because the page already has loaded completely.

document.write shouldn't be used anymore. There are many modern ways of updating the DOM. In this case, it would create a <span> element and update it's content using textContent.

Moreover, use addEventListener instead of inline event listeners:

var x = 0;
var span = document.querySelector('span'); // find the <span> element in the DOM
var increment = document.getElementById('increment'); // find the element with the ID 'increment'
var decrement = document.getElementById('decrement'); // find the element with the ID 'decrement'

increment.addEventListener('click', function () {
  // this function is executed whenever the user clicks the increment button
  span.textContent = x++;
});

decrement.addEventListener('click', function () {
  // this function is executed whenever the user clicks the decrement button
  span.textContent = x--;
});

<button id="increment">increment</button>
<button id="decrement">decrement</button>
<span>0</span>

As others have mentioned, the first x++ won't have a visible effect, because the value of x is incremented after the content of the <span> is updated. But that wasn't not your original problem.

Solution 2

The problem is that you put ++ and -- after the variable, meaning that it will increment/decrement the variable after printing it. Try putting it before the variable, like below.

Also, as mentioned, you have some trouble with document.write(). Consider the following documentation from the W3Schools page:

The write() method writes HTML expressions or JavaScript code to a document.

The write() method is mostly used for testing. If it is used after an HTML document is fully loaded, it will delete all existing HTML.

Thus, document.write() will remove all your existing content as soon as you click on a button. If you want to write to the document, use an element's .innerHTML like this:

var x = 0;

document.getElementById('output-area').innerHTML = x;

function button1() {
  document.getElementById('output-area').innerHTML = ++x;
}

function button2() {
  document.getElementById('output-area').innerHTML = --x;
}

<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<span id="output-area"></span>

Solution 3

Why don't you change your code a bit? Instead of document.write(x++) and document.write(x--) use document.write(++x) and document.write(--x).

Solution 4

document write will delete full html: The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML. As in w3schools

try this instead

<body>
<input type=button value="increment" onclick="button1()" />
<input type=button value="decrement" onclick="button2()" />
<div id="value"></div>
<script type="text/javascript">
    var x=0

    var element = document.getElementById("value");
    element.innerHTML = x;

    function button1(){
        element.innerHTML = ++x;
    }
    function button2(){
        element.innerHTML = --x;
    }
</script>

I changed the x-- and x++ to ++x and --x so the changes are immediatly. With this change your code would have worked aswell. showing 1 or -1.

Solution 5

HTML code for UI

<div class="card">
      <div class="card-body">
       <h5 class="card-title">How many guests can stay?</h5>
       <div class="row">
       <ul class="guestCounter">
          <li data-btn-type="increment"><span class="romoveBtn"><i class="fa fa-plus"></i></span> </li>
          <li class="counterText"><input type="text" name="guestCount" id="btnGuestCount" value="1" disabled /> </li>
        <li data-btn-type="decrement"><span class="romoveBtn"><i class="fa fa-minus"></i></span></li>
       </ul>
  </div>

Java Script:

// set event for guest counter
$(".guestCounter li").on("click", function (element) {
    var operationType = $(this).attr("data-btn-type");
    //console.log(operationType);
    var oldValue = $(this).parent().find("input").val();
    //console.log(oldValue);

    let newVal;
    if (operationType == "increment") {
         newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
             newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }
    $(this).parent().find("input").val(newVal);
});

View more solutions

18,396

Author by

T. Ou

Updated on June 20, 2022

Comments

T. Ou almost 2 years

I am new to programming. Every time I run this code, nothing happens. Can you please tell me why this is?

<body>
  <input type=button value="increment" onclick="button1()" />
  <input type=button value="decrement" onclick="button2()" />
  <script type="text/javascript">
    var x = 0
    document.write(x)

    function button1() {
      document.write(x++)
    }
    function button2(){
      document.write(x--)   
    }
  </script>
</body>