Как нажимать на изображение, чтобы показывать изображения с помощью функции

Попытка щелкнуть 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

Если вы хотите показать и изображение, которое необходимо добавить значение randomoneof на IMG тег не на сНу тега. Измените это и я думаю, что он будет работать

источник

2016-10-27 02:27:29

как? поэтому я не должен использовать outputDiv? –

Нет, вы должны использовать: А на Javascript, вы должны изменить значение SRC:. document.getElementById ('рэнд-образ') SRC = "путь-к-изображению"; –

.value на outputDiv не будет отображать изображения. Вы должны установить атрибут src тега <img>.

Предполагая, что все случайные изображения проживают в /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, и каждый раз, когда я нажимаю на мяч, он должен проявлять только одну эмоцию. –

@WinnieChan Я отредактировал свой ответ. Но если Хиен-Хуйн уже ответил на вашу очередь, примите его ответ. (Должна быть отметка где-то слева от его ответа) – 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

Nice. Просто дайте понять, что/где 'randomImg' для полноты. – Terminus

@Terminus: Я только что обновил полный код + демо-ссылку. Спасибо за ваше предложение. –

Я понял. спасибо :) –

Как нажимать на изображение, чтобы показывать изображения с помощью функции

ответ

Смежные вопросы