JavaScript Отображение изображения и текста вместо сообщения оповещения

Я новичок и начинаю изучать кодирование. У меня есть вопрос относительно знаменитого «Сколько пальцев я держу?» проект. Поэтому вместо предупреждающего сообщения я хочу, чтобы фактическое изображение пальца было 1-5, и сообщение было либо правильно, либо нет.JavaScript Отображение изображения и текста вместо сообщения оповещения

Я думаю, что есть jquery-коды .. но я не хочу прыгать в jquery и сначала изучать jQuery-хардкор. Я застрял в создании массива изображений и не могу заставить изображение придумать.

Вот код, у меня есть:

<body> 

    <p>How many fingers am I holding up?</p> 

    <p><input type="text" id="guess"> <button id="checkGuess">Guess!</button></p> 

    <div id="image"></div> 

    <div id="text"></div> 

    <script type="text/javascript"> 

     var imgArray = new Array(); 

     imgArray[1] = new Image(); 
      imgArray[1].src="images/1.png"; 

     imgArray[2] = new Image(); 
      imgArray[2].src="images/2.png"; 

     imgArray[3] = new Image(); 
      imgArray[3].src="images/3.png"; 

     imgArray[4] = new Image(); 
      imgArray[4].src="images/4.png"; 

     imgArray[5] = new Image(); 
      imgArray[5].src="images/5.png"; 


     document.getElementById("checkGuess").onclick = function() { 

      var randomNumber = Math.random(); 

      randomNumber = randomNumber * 6; 

      randomNumber = Math.floor(randomNumber); 

      if (document.getElementById("guess").value == randomNumber) { 

       doument.getElementById("image").innerHTML = imgArray[num] + alert("Well done! You got it!"); 

      } else { 

       alert("Nope! The number was " + randomNumber); 

      } 

     } 


    </script> 



</body>

Спасибо ребята! Ценю вашу помощь!

Cheers! Char

источник

2016-07-08 Char

Вы можете попробовать использовать «модалы». http://www.w3schools.com/bootstrap/bootstrap_modal.asp –

Я думаю, вы можете сделать что-то подобное этой скрипке.

https://jsfiddle.net/6a4p2po4/5/

То, что я должен был сделать imgArray массив ЦСИ изображений и обновил IMG SRC в зависимости от результата.

Я заметил, что во время работы у вас есть опечатки и неустановленные переменные.

Например, «doument» имеет орфографическую ошибку, а «num« »не установлен.

doument.getElementById("image").innerHTML = imgArray[num] + alert("Well done! You got it!");

Это может помочь использовать Chrome или другой браузер для проверки консоли (F12). Это определенно поможет вам отлаживать.

Использование console.log() вместо alert() сделает его показать, как бревно, а не всплывающее окно, так что вы можете проверить значения, сохраненные на переменных, т.е. console.log(randomNumber);

источник

2016-07-08 03:41:20 dee

Вы на правильном пути! Хорошая работа до сих пор!

Вы сказали

Так вместо предупредительных сообщений, я хочу реальное изображение пальца ...

, что приводит меня к мысли, что мы не никогда хотим вызовите alert() и вместо этого хотите отобразить изображение и сообщение. Предполагая, что я верю в своем предположении, вот какой-то код ...

<html> 
<head> 
    <!-- some other stuff... --> 

    <!-- CSS is your friend! --> 
    <style> 
    .hidden { 
     display: none; 
    } 
    </style> 
</head> 
<body> 

<p>How many fingers am I holding up?</p> 

<p> 
    <input type="text" id="guess"> 
    <button id="checkGuess" onclick="checkGuess()">Guess!</button> 
</p> 

<div id="image"> 
    <!-- We can put the images in here then just hide/show them, which is much easier! --> 
    <img class="hidden" src="./images/1.png"/> 
    <img class="hidden" src="./images/2.png"/> 
    <img class="hidden" src="./images/3.png"/> 
    <img class="hidden" src="./images/4.png"/> 
    <img class="hidden" src="./images/5.png"/> 
</div> 

<div id="text"></div> 

<script> 
    function checkGuess(){ 
    var actualFingerCount = Math.floor(Math.random() * (5 - 1 + 1)) + 1; 
    //the `+` casts the value into a number 
    var userGuess = +document.getElementById('guess').value; 
    //get all of our images 
    var images = document.querySelectorAll('img'); 
    //hide all of them just to be safe 
    images.forEach(function(img){ 
     img.classList.add('hidden'); 
    }); 
    //then show the one we want 
    images[actualFingerCount - 1].classList.remove('hidden'); 

    var textDiv = document.getElementById('text'); 
    if(actualFingerCount === userGuess) { 
     textDiv.innerHTML = 'Yay, you got it!'; 
    } 
    else { 
     textDiv.innerHTML = 'Whoops, try again! The number was ' + actualFingerCount + '.'; 
    } 
    } 
</script> 
</body> 
</html>

И вот он у вас есть!

Обратите внимание, что это надуманный пример. В реальном мире вы никогда не должны определять функции в глобальном пространстве имен и не должны полагаться на элементы, находящиеся в определенном порядке, как это было с изображениями. Возможно, вы можете принять его и улучшить, чтобы следовать лучшим стандартам кодирования!

источник

2016-07-08 03:41:35 IGNIS

HI.Спасибо за вашу помощь. Я попробовал код, который вы дали, но как я могу сделать изображения не выстроенными? Я хочу, чтобы он был одним за раз, когда изображение появится, если пользователь набирает номер. – Char

@Char Они только «выстроились» в DOM. Они на самом деле не видны пользователю. См. [Эту скрипку] (https://jsfiddle.net/k5qmrxp4/) для демонстрации. – IGNIS

JavaScript Отображение изображения и текста вместо сообщения оповещения

ответ

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