如何使用按钮在 HTML JavaScript 中不断添加文本？

Question

我需要创建一个显示 10 个按钮 (0-9) 的网页。例如，当单击 4 号按钮时，网页应在按钮下方显示以下消息：You have entered four例如，当接下来点击 9 号按钮时，消息将变为：You have entered four-nine这个过程继续。这是我到目前为止所拥有的。我已经能够单独显示每个数字，但无法弄清楚如何在单击数字后继续将数字添加到显示中。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>

Answer 1

您不需要每次都覆盖内容：

<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>

您可以使用事件侦听器和 HTML 自定义属性优化脚本：

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>

Answer 2

这很简单，你唯一要做的就是把“=”换成“+=”。例如：

function number6(){

  var displaySpan = document.getElementById("display");

  displaySpan.innerHTML += "six";

}

“+=”取前一个值，并添加一个新值。

如果你想让编辑更容易，并且更容易添加新值，我建议像这样使用带开关的功能：

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;

    } 

}

在 HTML 中，只需交换名称并在函数中给出数字：

<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>

然后，如果您想更改某些内容，只需编辑一个功能而不是十个。

Answer 3

这是一个完整的工作演示：

<!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>

Answer 4

你可以做一些简单的事情，像这样：

// 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>

基本上，只要给每个按钮一个value，然后当父级上发生单击事件时就可以使用它div（这种技术称为事件委托，它只需要 1 个自事件处理程序，而不是每个按钮 1 个）。单击按钮时，只需将其值添加到字符串即可。