第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使用按鈕在 HTML JavaScript 中不斷添加文本？

如何使用按鈕在 HTML JavaScript 中不斷添加文本？

吃雞游戲 2023-05-11 14:38:55
我需要創(chuàng)建一個顯示 10 個按鈕 (0-9) 的網(wǎng)頁。例如，當(dāng)單擊 4 號按鈕時，網(wǎng)頁應(yīng)在按鈕下方顯示以下消息：You have entered four例如，當(dāng)接下來點擊 9 號按鈕時，消息將變?yōu)椋篩ou have entered four-nine這個過程繼續(xù)。這是我到目前為止所擁有的。我已經(jīng)能夠單獨顯示每個數(shù)字，但無法弄清楚如何在單擊數(shù)字后繼續(xù)將數(shù)字添加到顯示中。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>
查看完整描述

4 回答

?
大話西游666

TA貢獻(xiàn)1817條經(jīng)驗 獲得超14個贊

您不需要每次都覆蓋內(nèi)容：


<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 自定義屬性優(yōu)化腳本：


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>


查看完整回答
反對 回復(fù) 2023-05-11
?
米琪卡哇伊

TA貢獻(xiàn)1998條經(jīng)驗 獲得超6個贊

這很簡單，你唯一要做的就是把“=”換成“+=”。例如：


function number6(){

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


  displaySpan.innerHTML += "six";

}

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


如果你想讓編輯更容易，并且更容易添加新值，我建議像這樣使用帶開關(guān)的功能：


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 中，只需交換名稱并在函數(shù)中給出數(shù)字：


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

然后，如果您想更改某些內(nèi)容，只需編輯一個功能而不是十個。


查看完整回答
反對 回復(fù) 2023-05-11
?
翻過高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗 獲得超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>


查看完整回答
反對 回復(fù) 2023-05-11
?
墨色風(fēng)雨

TA貢獻(xiàn)1853條經(jīng)驗 獲得超6個贊

你可以做一些簡單的事情，像這樣：


// 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，然后當(dāng)父級上發(fā)生單擊事件時就可以使用它div（這種技術(shù)稱為事件委托，它只需要 1 個自事件處理程序，而不是每個按鈕 1 個）。單擊按鈕時，只需將其值添加到字符串即可。



查看完整回答
反對 回復(fù) 2023-05-11
  • 4 回答
  • 0 關(guān)注
  • 225 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號