イメージをクリックして機能を持つイメージを表示する方法

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を使用すべきではありませんか？ –

いいえ、あなたは使用する必要があります。をとJavaScriptであなたは、src値は変更する必要があります。のdocument.getElementById（ 'ランド-画像'）SRC = "をパスツー・画像"; –

設定.valueでoutputDivに画像は表示されません。 <img>タグのsrc属性を設定する必要があります。

すべてのランダムイメージが/Imagesにあると仮定すると、新しいmagicEight関数として以下を使用できます。

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を使用しなければならず、ボールをクリックするたびに1つの感情しか表示されません。 –

@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：私はフルコード+デモリンクを更新しました。あなたの提案をありがとう。 –

私はそれを得た。ありがとう:) –

イメージをクリックして機能を持つイメージを表示する方法

答えて

関連する問題