Wie man auf ein Bild klickt, um Bilder mit einer Funktion anzuzeigen

Der Versuch, auf magic8 zu klicken, aber die fröhlichen, traurigen und überraschten Bilder werden nicht unter der Linie angezeigt. Was habe ich falsch gemacht? Ich habe die Bilder in random.js im selben Ordner gespeichert.Wie man auf ein Bild klickt, um Bilder mit einer Funktion anzuzeigen

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

Quelle

2016-10-27 Winnie Chan

was 'random.js'? Werden Fehler in der Konsole protokolliert? – Isaac

und was ist 'RandomOneOf'? – Dekel

Bitte posten Sie ALLEN Code. Es wird uns helfen, Ihre Frage zu beantworten. Vielen Dank. Willkommen bei Stackoverflow :) – www139

Wenn Sie zeigen und Bild wollen, müssen Sie den Wert der randomoneof auf einem img-Tag nicht auf einem div Tag hinzuzufügen. Ändern Sie das und ich denke, es wird funktionieren

Quelle

2016-10-27 02:27:29

wie? also sollte ich outputDiv nicht verwenden? –

Nein, sollten Sie verwenden: Und Javascript sollten Sie den src-Wert ändern. document.getElementById ('rand-Bild') src = "path-to-the-Bild"; –

Einstellung .value auf outputDiv wird keine Bilder angezeigt. Sie müssen das Attribut src eines Tags setzen.

Unter der Annahme, dass alle zufälligen Bilder in /Images leben, können Sie die folgende Funktion als Ihre neue magicEight-Funktion verwenden.

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

Quelle

2016-10-27 02:33:32 Terminus

es funktioniert nicht. Ich muss RandomOneOf benutzen und jedes Mal wenn ich auf den Ball klicke, sollte es nur eine Emotion zeigen. –

@WinnieChan Ich habe meine Antwort bearbeitet. Aber wenn HienHuynh deine Frage bereits beantwortet hat, akzeptiere seine Antwort. (Es sollte irgendwo links von seiner Antwort ein Häkchen sein) – Terminus

Demo: 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>

Quelle

2016-10-27 02:55:32

Schön. Machen Sie einfach klar, was/wo 'randomImg' der Vollständigkeit halber ist. – Terminus

@Terminus: Ich habe gerade den vollständigen Code + Demo-Link aktualisiert. Danke für Ihren Vorschlag. –

ich habe es. Danke :) –

Wie man auf ein Bild klickt, um Bilder mit einer Funktion anzuzeigen

Antwort

Verwandte Themen