JavaScriptで警告メッセージではなく画像とテキストを表示

私は初心者であり、コーディングを学び始めています。私は有名な「どのくらいの指を握っているのですか？プロジェクト。だから、警告メッセージの代わりに、私は1-5の指の実際のイメージとそのメッセージが正しいかどうかを欲しい。JavaScriptで警告メッセージではなく画像とテキストを表示

jqueryコードがあると思いますが、jqueryにジャンプしてハードコアのJavaScriptを最初に習得したくありません。私は画像アレイを作成することに悩まされており、画像を上にすることはできません。

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

おかげでみんな：

ここで私が持っているコードです！あなたの助けに感謝！

乾杯！ Char

出典

2016-07-08 Char

'modals'を試してみることができます。 http://www.w3schools.com/bootstrap/bootstrap_modal.asp –

私はこのフィドルのようなことをすることができると思います。私が何をしたか

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

imgArrayに画像のSRCの配列を作ることだったし、その結果に応じて、IMG srcを更新しました。

作業中にいくつかのタイプミスや変数の設定が解除されています。

たとえば、「doument」のスペルが間違っていて、「 'num'」が設定されていません。

Chromeや他のブラウザを使用してコンソール（F12）を確認すると便利です。間違いなくデバッグに役立ちます。

あなたが変数に格納されている値を確認することができますので、それは、代わりに、ポップアップウィンドウのログとして表示ようになりますconsole.log()代わりalert()のを使用して、すなわちconsole.log(randomNumber);

出典

2016-07-08 03:41:20 dee

あなたは正しい軌道に乗っています！これまでのところ良い仕事！私たちがしたいことはありませんと思うように私をリード

あなたは警告メッセージの

ので代わり言った、私は指の実際の画像が欲しい...

alert()に電話して、代わりに画像とメッセージを表示する必要があります。私の仮定で正しいとすれば、ここにいくつかのコードがあります...

<html> <head>   <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">  <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。ご協力いただきありがとうございます。私はあなたが与えたコードを試しましたが、どのようにイメージを整列させることができませんか？私はそれが一度に1つであることを望む画像は、数字のユーザーキーが表示されます。 – Char

@Charこれは、DOM内でのみ「並べられて」います。それらは実際にユーザーには見えません。デモンストレーションについては、[this fiddle]（https://jsfiddle.net/k5qmrxp4/）をご覧ください。 – IGNIS

JavaScriptで警告メッセージではなく画像とテキストを表示

答えて

関連する問題