javascript (jquery가 아님)의 if 문을 사용하여 난수에 따라 텍스트 표시/숨기기 방법

버튼을 클릭 할 때 그림 옆에 복잡한 텍스트를 표시하려고합니다. 지금까지 저는 버튼을 클릭 할 때 그림을 무작위로 표시했습니다.javascript (jquery가 아님)의 if 문을 사용하여 난수에 따라 텍스트 표시/숨기기 방법

함수에서 텍스트를 작동 (기본적으로 목록) 할 수 없으므로 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은 다음과 같습니다 다음 HTML 내가 가진 것

이 트릭의 뜻 도움이

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"; 
       } 
}

출처

2017-12-10 Kiao Takeuchi

기본적으로 버튼을 클릭하면 텍스트가 사라집니다. 사진은 여전히 작동합니다. –

희망 ..

나는 모든 텍스트 내용에 대한 컨테이너를 생성 (부모 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를) 숨겨 자바 스크립트와 트릭을 할 그냥 아래의 작업 바이올린을 참조하십시오 표시 할 div에 둡니다.

작업 바이올린 : https://jsfiddle.net/a1pLnbm0/26/

희망은 내가 바로 건배를 얻을!

출처

2017-12-10 13:12:45 itsmeniel

javascript (jquery가 아님)의 if 문을 사용하여 난수에 따라 텍스트 표시/숨기기 방법

답변

관련 문제