How to use buttons to keep adding text in HTML JavaScript? [duplicate]

Question

I need to create a web page that displays 10 buttons (0-9). When, for example, the button number 4 is clicked, the web page should display the following message under the buttons:

You have entered four

When, for example, the button number 9 is clicked next, the message will become:

You have entered four-nine

This process continues.

Here is what I have so far. I have been able to display each number individually, but cannot figure out how to continue adding numbers to the display once they've been clicked.

function number0(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "zero";
}

function number1(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "one";
}

function number2(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "two";
}

function number3(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "three";
}

function number4(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "four";
}

function number5(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "five";
}

function number6(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "six";
}

function number7(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "seven";
}

function number8(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "eight";
}

function number9(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML = "nine";
}

<button onclick="number0()">0</button>
<button onclick="number1()">1</button>
<button onclick="number2()">2</button>
<button onclick="number3()">3</button>
<button onclick="number4()">4</button>
<button onclick="number5()">5</button>
<button onclick="number6()">6</button>
<button onclick="number7()">7</button>
<button onclick="number8()">8</button>
<button onclick="number9()">9</button>

<br /><br />
<span id="display"></span>

If you are trying to continuously add more and more elements, why not use createElement instead of using innerHTML? — zero298
– zero298, Commented Oct 13, 2020 at 13:33

Greedo · Accepted Answer · 2020-10-13 14:04:09Z

You need to not overwrite the content every time:

<script>

  function number0(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "zero";
  }

  function number1(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "one";
  }

  function number2(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "two";
  }

  function number3(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "three";
  }

  function number4(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "four";
  }

  function number5(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "five";
  }

  function number6(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "six";
  }

  function number7(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "seven";
  }

  function number8(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "eight";
  }

  function number9(){
    var displaySpan = document.getElementById("display");
    if(displaySpan.innerHTML){
      displaySpan.innerHTML += "-";
    } else {
      displaySpan.innerHTML = "You have entered: ";
    }
    displaySpan.innerHTML += "nine";
  }


  </script>

<body>
  <button onclick="number0()">0</button>
  <button onclick="number1()">1</button>
  <button onclick="number2()">2</button>
  <button onclick="number3()">3</button>
  <button onclick="number4()">4</button>
  <button onclick="number5()">5</button>
  <button onclick="number6()">6</button>
  <button onclick="number7()">7</button>
  <button onclick="number8()">8</button>
  <button onclick="number9()">9</button>

  <br /><br />
  <span id="display"></span>
</body>

You can optimize the script with event listeners and HTML custom attributes:

var displaySpan = document.getElementById("display");
document.querySelectorAll('.number-btn').forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    displaySpan.innerHTML += displaySpan.innerHTML
      ? "-"
      : "You have entered: ";
    displaySpan.innerHTML += e.target.getAttribute('data'); 
  });
});

<body>
  <button class="number-btn" data="zero">0</button>
  <button class="number-btn" data="one">1</button>
  <button class="number-btn" data="two">2</button>
  <button class="number-btn" data="three">3</button>
  <button class="number-btn" data="four">4</button>
  <button class="number-btn" data="five">5</button>
  <button class="number-btn" data="six">6</button>
  <button class="number-btn" data="seven">7</button>
  <button class="number-btn" data="eight">8</button>
  <button class="number-btn" data="nine">9</button>

  <br /><br />
  <span id="display"></span>
</body>

This answer works, but still requires so much extra code than is really needed. You should only need 1 event handler function (instead of 9 of them that do the same thing) - event delegation will help with this.

Wiktor Matusiak · Accepted Answer · 2020-10-13 13:45:52Z

1

it's pretty easy, the only thing you have to do is just swap "=" with "+=". For example:

function number6(){
  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML += "six";
}

"+=" takes previous value, and add new one.

If you want to make it easier to edit, and easy add new values, I would suggest to use function with switch like this:

function number(number){
    var displaySpan = document.getElementById("display");

    //Defines what is in inner 
    var innerDisplay = displaySpan.innerHTML;
    //Will be defined by switch and then added to text
    var newNumber = '';

    //It takes number from the function and define new number
    switch(number){
        case 0: 
            newNumber = "zero";
            break;

        case 1: 
            newNumber = "one";
            break;
        //And add all of this then.
    }

    //then check if there is alredy some number in display
    if (innerDisplay){
        innerDisplay += "-" + newNumber;
    } else{
        //If there is no already set text in display, ten create new one
        innerDisplay = "You have entered " + newNumber;
    } 
}

And in HTML just swap name and give numbers in fucntion:

<button onclick="number(0)">0</button>
<button onclick="number(1)">1</button>
<button onclick="number(2)">2</button>
<button onclick="number(3)">3</button>
<button onclick="number(4)">4</button>
<button onclick="number(5)">5</button>
<button onclick="number(6)">6</button>
<button onclick="number(7)">7</button>
<button onclick="number(8)">8</button>
<button onclick="number(9)">9</button>

And then, if u want to change something, you just edit one function not ten.

edited Oct 13, 2020 at 13:45

answered Oct 13, 2020 at 13:36

Wiktor Matusiak

1293 bronze badges

5 Comments

StackByMe Over a year ago

Instead of passing the number as parameter and using a switch to get the text you could just pass down the text and completely remove the switch statement.

Wiktor Matusiak Over a year ago

It is true, but it closes options for bigger development on code. After passing just a word, you cant do as much as you can do with switch. For example you can add specific functions for each number. In my opinion it is just a better option for future changes and evelopment.

StackByMe Over a year ago

No that is not true, you can just insert an if statement for certain numbers to give them extra functionality. What if you have a 100 numbers? Will you also create 100 items in your switch statement? That's a lot of extra unnecessary code.

Wiktor Matusiak Over a year ago

Okey, you might be right, my bad. I will do changes, if u let me to use your idea.

StackByMe Over a year ago

Yes of course do what you want, just giving my opinion!

joseph · Accepted Answer · 2020-10-13 13:50:43Z

Here's a full working demo:

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
    <button onclick="number('zero')">0</button>
    <button onclick="number('one')">1</button>
    <button onclick="number('two')">2</button>
    <button onclick="number('three')">3</button>
    <button onclick="number('four')">4</button>
    <button onclick="number('five')">5</button>
    <button onclick="number('six')">6</button>
    <button onclick="number('seven')">7</button>
    <button onclick="number('eight')">8</button>
    <button onclick="number('nine')">9</button>

    <br /><br />
    <span id="display"></span>
    <script type="text/javascript">
        var displaySpan = document.getElementById("display");
        function number(number){
            if(displaySpan.innerHTML.length === 0){
                displaySpan.innerHTML += number;
            }else{
                displaySpan.innerHTML += '-' + number;
            }
        }
    </script>
</body>
</html>

Obzi · Accepted Answer · 2020-10-13 13:32:49Z

0

You jsute need to add a bash - id the displaySpan.innerHTML isn't empty.

Sample :

displaySpan.innerHTML += (displaySpan.innerHTML.length === 0 ? '' : '-') + "number";

answered Oct 13, 2020 at 13:32

Obzi

2,3901 gold badge12 silver badges23 bronze badges

Comments

Tom O. · Accepted Answer · 2020-10-13 13:51:18Z

You could do something simple, like this:

// Store a reference to our text-container element (to display the output message)
const textEl = document.querySelector('#text-container');

// Our event handler function that will handle any click event on a button
const handleClick = e => {
  if (e.target.tagName === 'BUTTON') {
    if (textEl.innerText.length === 0) {
      textEl.insertAdjacentHTML('beforeend', 'You have entered&nbsp;');
    } else {
      textEl.insertAdjacentHTML('beforeend', '-');
    }
    textEl.insertAdjacentHTML('beforeend', e.target.value);
  }
};

// When any button in btn-container is clicked, handleClick will fire
document.querySelector('#btn-container').addEventListener('click', handleClick);

<div id="btn-container">
  <button value="zero">0</button>
  <button value="one">1</button>
  <button value="two">2</button>
  <button value="three">3</button>
  <button value="four">4</button>
  <button value="five">5</button>
  <button value="six">6</button>
  <button value="seven">7</button>
  <button value="eight">8</button>
  <button value="nine">9</button>
</div>

<div id="text-container">
</div>

Basically, just give every button a value which you can then use when a click event occurs on the parent div (this technique is called event delegation and it requires only 1 since event handler, instead of 1 for each button). When a button is clicked, simply add it's value to the string.

williamjnrkdd · Accepted Answer · 2020-10-13 13:52:59Z

You can have a single function that takes event as the argument and set the onclicks of all the buttons to that function. You also have to set the value of the buttons to the numbers in words. So in the function you get the event target and the value, which is the word form and add it up to the innerHTML of the display span. so to check if a hyphen is needed you can use the length of the innerHTML string to know if a number has already been added up. Like this:

<html lang="en" dir="ltr" class="inited">
    <span id="display">You have entered </span>
    <button value= "zero" onclick="number(event)">0</button>
    <button value= "one" onclick="number(event)">1</button>
    <button value= "two" onclick="number(event)">2</button>
    <button value= "three" onclick="number(event)">3</button>
    <button value= "four" onclick="number(event)">4</button>
    <button value= "five" onclick="number(event)">5</button>
    <button value= "six" onclick="number(event)">6</button>
    <button value= "seven" onclick="number(event)">7</button>
    <button value= "eight" onclick="number(event)">8</button>
    <button value= "nine" onclick="number(event)">9</button>
    <script>
        function number(event){
             var displaySpan = document.getElementById("display");
            displaySpan.innerHTML += (displaySpan.innerHTML.length === 17 ? '' : '-') + event.target.value;
            
        }
    </script>

    
</html>

Collectives™ on Stack Overflow

How to use buttons to keep adding text in HTML JavaScript? [duplicate]

6 Answers 6

2 Comments

5 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

5 Comments

Comments

Comments

Comments

Comments

Linked

Related