如何在javascript中使用if语句根据随机数显示/隐藏文本（无jquery）答案

【问题标题】：How to display/hide text depending on random number using if statement in javascript(no jquery)如何在javascript中使用if语句根据随机数显示/隐藏文本（无jquery）
【发布时间】：2018-05-24 02:44:36
【问题描述】：

单击按钮时，我试图在图片旁边显示一些复杂的文本。到目前为止，当我们单击按钮时，我使图片随机出现。

我无法在函数中使文本工作（它基本上是一个列表），所以我想在 HTML 中添加文本并使其根据随机数显示/隐藏。

图片和文字必须对应。

我还尝试使文本和图片（在 HTML 中声明的）显示/隐藏取决于仅使用函数的数字。但这对我不起作用。

这就是我拥有的 HTML：

<!DOCTYPE html>
<html lang = "en-US">
     <head>
        <meta charset = "utf-8">
        <title>Project</title>
        <link rel="stylesheet" type="text/css" href="index.css">
     </head>
     <body>
        <script src= "javaindex.js"></script>
          <button onclick="myFunc()" id="select" class="choosebtn">Select</button>
        </div>
        <div class="main">
          <img src="blank.jpg" name="picture">
           <div id="text">
            <p id="list1" >
            <h1> headingN</h1>
               <ul>
                  <li>elementN1</li>
                  <li>elementN2</li>
                  <li> elementN3</li>
              </ul>
           </p>
           <p id="list2" >
            <h1> heading</h1>
               <ul>
                  <li>element1</li>
                  <li>element2</li>
                  <li> element3</li>
              </ul>
           </p>
         </div>
        </div>
        <footer>Footer</footer>
     </body>
</html>

js.file 是：

function myFunc() {

                imgArray = new Array()
                imgArray[0] = "image1.jpg"
                imgArray[1] = "image2.jpg"
                imgArray[2] = "image3.jpg"
                imgArray[3] = "image4.jpg"

                document.getElementById("select").onclick = myFunc;
                randomN = Math.floor(Math.random()*4);

                 document.picture.src = imgArray[randomN];

                if ( randomN == 0 ){
                document.getElementById("list1").style.display = "block";
                }
               else if ( randomN == 1){
                document.getElementById("list2").style.display = "block";
               }
               else{
               document.getElementById("text").style.display = "none";
               }
}

【问题讨论】：

当我点击按钮时，文本基本上会消失。这些图片仍然有效。

标签： javascript html if-statement random display

【解决方案1】：

希望这个技巧会有所帮助..

我为所有文本内容创建了一个容器（充当我的父 div）并为每个内容（子 div）创建一个 div，然后添加与我的随机数对应的 id。

<img src="http://via.placeholder.com/350x150?text=Default" name="picture">
  <div id="container" class="main">
    <div id="content" style="border: 1px solid #000; width:350px;">
      <h1> Heading Default</h1>
      <p>Sample Default Message Sample Default Message</p>
    </div>

    <div id="content1" style="border: 1px solid #000; width:350px; display: none;">
       <h1>Heading 1</h1>
       <p>Sample One Message Sample One Message</p>
    </div>

    <div id="content2" style="border: 1px solid #000; width:350px; display: none;">
        <h1> Heading 2 </h1>
        <p>Sample Two Message Sample Two Message</p>
    </div>

   <div id="content3" style="border: 1px solid #000; width:350px; display: none;">
        <h1>Heading 3 </h1>
       <p>Sample Three Message Sample Three Message</p>
    </div>
</div>

然后通过隐藏所有（子 div）来使用 javascript 来解决问题，并留下您想要显示的 div，请参阅下面的工作小提琴。

工作小提琴：https://jsfiddle.net/a1pLnbm0/26/

希望我做对了干杯！

【讨论】：