이미지를 클릭하여 기능이있는 이미지를 표시하는 방법

magic8을 클릭하려고하지만 행복하고 슬프고 놀란 그림은 줄 아래에 표시되지 않습니다. 나는 무엇을 잘못 했는가? 나는 같은 폴더에있는 random.js에 이미지를 저장했습니다. 당신이 보여 이미지하려면이미지를 클릭하여 기능이있는 이미지를 표시하는 방법

<html> 
    <head> 
     <script type=text/javascript src="random.js"> 
     </script> 
     <script> 
     function magicEight() { 
      var imgName; 
      imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]); 
      document.getElementById('outputDiv').value = imgName; 
     } 
     </script> 
    </head> 
    <body> 
     <div style="text-align:center"> 
      <h1> Magic 8-ball (Mattel, Inc.) </h1> 
      <p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p> 
      <input type="text" id="questionBox" size=90 value=""> 
      <p> 
       <input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();"> 
      </p> 
      <hr> 
      <div id="outputDiv"></div> 
     </div> 
    </body> 
</html>

출처

2016-10-27 Winnie Chan

'무엇을 random.js'입니까? 콘솔에 오류가 기록됩니까? – Isaac

그리고'RandomOneOf'은 무엇입니까? – Dekel

모든 코드를 게시하십시오. 그것은 우리가 당신의 질문에 대답하는 데 도움이 될 것입니다. 고맙습니다. Stackoverflow에 오신 것을 환영합니다 :) – www139

당신이 아닌 div 태그에 img 태그에 randomoneof의 값을 추가해야합니다. 변경하면 제대로 작동한다고 생각합니다.

출처

2016-10-27 02:27:29

어떻게? 그래서 나는 outputDiv를 사용하지 말아야합니까? –

아니, 당신은 사용해야합니다 를 그리고 자바 스크립트에 당신의 src 값을 변경해야합니다. document.getElementById를 ('랜드 이미지') SRC = "를 경로 - 투 - 이미지"; –

설정 .value에서 outputDiv은 이미지를 표시하지 않습니다. 속성을 <img> 태그로 설정해야합니다.

모든 임의의 이미지가 /Images에 있다고 가정하면 다음을 새로운 magicight 기능으로 사용할 수 있습니다.

function magicEight() { 
    var imgName; 
    imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]); 
    var imageTag = "<img src='/Images/" + imgName + "'>"; 
    document.getElementById('outputDiv').innerHTML= imageTag; 
}

출처

2016-10-27 02:33:32 Terminus

작동하지 않습니다. 나는 RandomOneOf를 사용해야하고 볼을 클릭 할 때마다 단 한 번의 감정 만 보여야합니다. –

@WinnieChan 나는 나의 대답을 편집했다. 그러나 HienHuynh가 이미 당신의 대기에 응답했다면, 그의 대답을 받아 들일 것입니다. (그의 대답의 왼쪽에 확인 표시가 있어야합니다.) – Terminus

데모 : https://codepen.io/hienhuynhtm/pen/dpLgNr

<script> 
    var IMAGE_LIST = [ 
     "http://balance3e.com/Images/happy.gif", 
     "http://balance3e.com/Images/sad.gif", 
     "http://balance3e.com/Images/surprised.gif" 
    ]; 
    function magicEight() { 
     var imgName = IMAGE_LIST[Math.floor(Math.random() * IMAGE_LIST.length)]; 
     document.getElementById("randomImg").src = imgName; 
    } 
</script> 

<div style="text-align:center"> 
    <h1> Magic 8-ball (Mattel, Inc.) </h1> 
    <p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p> 
    <input type="text" id="questionBox" size=90 value=""> 

    <p><input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();"></p> 

    <hr /> 
    <img id="randomImg" /> 
</div>

출처

2016-10-27 02:55:32

니스. 'randomImg'가 완전성을 위해 무엇을/어디에 있는지 분명히하십시오. – Terminus

@Terminus : 전체 코드 + 데모 링크를 방금 업데이트했습니다. 귀하의 제안에 감사드립니다. –

나는 그것을 얻었다. 고마워요 :) –

이미지를 클릭하여 기능이있는 이미지를 표시하는 방법

답변

관련 문제