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

4回答

大话西游666

您不需要每次都覆盖内容：<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>

0 0

米琪卡哇伊

这很简单，你唯一要做的就是把“=”换成“+=”。例如：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>然后，如果您想更改某些内容，只需编辑一个功能而不是十个。

0 0

翻过高山走不出你

这是一个完整的工作演示：<!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>

0 0

墨色风雨

你可以做一些简单的事情，像这样：// 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 buttonconst handleClick = e => {  if (e.target.tagName === 'BUTTON') {    if (textEl.innerText.length === 0) {      textEl.insertAdjacentHTML('beforeend', 'You have entered ');    } else {      textEl.insertAdjacentHTML('beforeend', '-');    }    textEl.insertAdjacentHTML('beforeend', e.target.value);  }};// When any button in btn-container is clicked, handleClick will firedocument.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 个）。单击按钮时，只需将其值添加到字符串即可。

0 0