如何根据随机数字显示/隐藏文本，具体使用JavaScript中的if语句(无jQuery)中的if语句

我试图在单击按钮时在图片旁边显示一些复杂的文本。到目前为止

我无法在功能中使文本起作用（基本上是列表），因此我想在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";
               }
}

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

我为所有文本内容创建了一个容器（充当我的父级）并为每个内容（儿童Divs）创建一个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>

然后，通过隐藏所有（儿童divs）来与JavaScript一起做技巧

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

希望我能为此加油！

相关内容

最新更新

热门标签：