如何使用JavaScript中的if語句根據隨機數顯示/隱藏文本（無jQuery）

Question

我試圖在單擊按鈕時在圖片旁邊顯示一些復雜的文本。 到目前為止，當我們單擊按鈕時，我使圖片隨機出現。

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

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

希望我做對了干杯！

如何使用JavaScript中的if語句根據隨機數顯示/隱藏文本（無jQuery）

問題描述

1 個解決方案

解決方案1
1 2017-12-10 13:12:45

如何使用JavaScript中的if語句根據隨機數顯示/隱藏文本（無jQuery）

問題描述

1 個解決方案

解決方案1 1 2017-12-10 13:12:45

解決方案1
1 2017-12-10 13:12:45