Question

我有一个页面，我想要两个按钮，当点击一个按钮时，显示你好，当点击另一个按钮时会隐藏＆＃34;你好＆＃34;消息，然后显示＆＃34;再见＆＃34;。我知道这需要在javascript中完成，但我对javascript不好。

Answer 1

检查此代码段

＆＃13;

<p id="msg"></p>

<button onclick="helloFunction()">Say Hello</button>
<button onclick="byeFunction()">Wave Goodbye</button>

<script>
function helloFunction() {
    document.getElementById("msg").innerHTML = "Hello";
}
  
  function byeFunction() {
    document.getElementById("msg").innerHTML = "Goodbye";
}

</script>

＆＃13;

Answer 2

有几种方法可以做到这一点，其中一种方法会影响dom元素的可见性，这些元素会表示你好或再见，另一种方法如下图所示你实际上会根据哪个按钮更改dom对象的文本按下

<button onClick="javascript:say('Hello');">Say Hi</button>
<button onClick="javascript:say('Goodbye');">Say Goodbye</button>
<div id="TextField"></div>
<script>
    function say(text) {
        var element = document.getElementById("TextField");
        element.innerHTML = text;
    }
</script>

Answer 3

这里你需要达到这样的壮举。

首先创建一个div或p标签来保存你的文字和两个按钮例如

    <div id="container">Hello</div>
    <button id="show">Show</button>
    <button id="hide">Show</button>

确保你的div有一个id，你也按钮。您可以将其用作参考。

然后在您的javascript中，您可以切换显示或div的可见性

   <script type="text/javascript">
      //Declare variable
     var div = document.getElementById("container");
     var show = document.getElementById("show");
      var hide = document.getElementById("hide");

     //run when windows fully loads
     window.onload = function(){

         //when i click show button
         show.onclick = function(){
                div.style.display = "block";
          }

         //when i click hide button
         hide.onclick = function(){
              div.style.display = "none";
            }

         }

      //That is champ, this is all vanilla javascript. You can also look              into implementing with jquery.
    </script>

如何显示/隐藏内容

3 个答案: