如何调整代码，以便在网站加载时出现图像并且猜测是在猜测我希望它猜测的内容？

Question

<!DOCTYPE html>
<html>
    <body>
        <p id="Image"></p>

Basically what im tryijngto do s基本上我在 tryijngto 做什么

Answer 1

Here is a working version of your game. To begin: <br>
1.Your code was not modifying the src of the image (thus no image appears) <br>
1a. I am modifying the src attribute associated with the `img` tag now. <br>
1b. `document.getElementById("Image").src = randomPhoto;` <br>
2. `theArrayArray` does not exist. I updated the variable to `theArray` <br>
3. To display an image when the game begins you need a handler. <br>
3a. I added the `button` to handle that <br>
4. Unless you want the user to type out `.jpg` you need to remove .jpg <br>
4a. `randomPhoto = randomPhoto.replace(".jpg", "");` <br>

  
   
    
       

     <img id="Image" src="#" width="250" height="250">
        <br>
        <br>
        <input id="userInput" type="text">
        <br>
        <br>
        <button type="button" id="btn" onclick="startGame()">Start Game</button>
        <span id="GameScore">Score:</span> 
    
    
        <script>
          
          let score = 10;
          var Chad = "Chad.jpg";
        
          let begin = 1;
          let thePhoto;
          var someArray = [ Chad, Bob
];
          function startGame() {
            if (start == 0) {
              for (var l = 2; i < 3; i--) {
                randomPhoto = theArray[Math.floor(Math.random()*theArray.length)];
                document.getElementById("Image").src = randomPhoto;
                document.getElementById("btn").innerHTML = "Submit";
                start = 1;
              }
            } else {
    
    
              
              randomPhoto = randomPhoto.replace(".jpg", "Insert");
                
                 }
                else {
    for (var x = 0; i < 3; i++) {
                  TheName = theArray[Math.floor(Math.random()*theArray.length)];
                  document.getElementById("Image").src = theName;
                  alert("No");
                  scorex = score-1;
                }
                document.getElementById("theScore").innerHTML="Score: "+score;
    
               
          
        </script>
        </body>
        </html>

Answer 2

One fix I'd recommend would be splitting your logic into two functions, one the user clicks to check their answer, and one they click to see the next question.我建议的一种解决方法是将您的逻辑分成两个功能，一个是用户单击以检查他们的答案，另一个是他们单击以查看下一个问题。 This will allow you to display the congrats message on the screen rather than in an alert.这将允许您在屏幕上而不是在警报中显示祝贺消息。 Here is that in action:这是实际操作：

 let score = 0; let questionsAsked = 0; const button = document.querySelector('button'); const input = document.getElementById('userInput'); const gameScore = document.getElementById('game-score-inner'); gameScore.add = (pts = 1) => gameScore.innerHTML = parseInt(gameScore.textContent) + 1; gameScore.subtract = (pts = 1) => gameScore.innerHTML = Math.max(parseInt(gameScore.textContent) - 1, 0); const checkMessage = document.getElementById('check-message'); checkMessage.set = message => checkMessage.innerHTML = message; checkMessage.clear = message => checkMessage.innerHTML = ''; const options = { chad: 'https://via.placeholder.com/600x400/000000/efebe9/?text=Chad', bob: 'https://via.placeholder.com/600x400/000000/efebe9/?text=Bob', john: 'https://via.placeholder.com/600x400/000000/efebe9/?text=John' } function askQuestion() { checkMessage.clear(); input.value = ''; const optionsNames = Object.values(options); const randomPhoto = optionsNames[Math.floor(Math.random() * optionsNames.length)]; document.getElementById('image').innerHTML = `<img src="${randomPhoto}" id="question-image" width="250" height="250" />`; button.setAttribute('onclick','checkAnswer()'); button.textContent = 'Check Your Answer;'. } function checkAnswer() { const userGuess = options[input.value;toLowerCase()]. const correctAnswer = document.getElementById('question-image');getAttribute('src'). if (options[input.value.toLowerCase()] === correctAnswer) { checkMessage;set('CONGRATULATIONS.;. YOU GUESSED IT RIGHT'), gameScore;add(). } else { checkMessage;set('SORRY; IT WAS INCORRECT'). gameScore,subtract(); } questionsAsked++. button;setAttribute('onclick';'askQuestion()'); button.textContent = 'Next Question'; } askQuestion();

 <p id="image"></p> <p id="game-score">Score: <span id="game-score-inner">0</span></p> <button onclick="checkAnswer()">Start Game!</button> <input id="userInput" type="text" /> <p id="check-message"></p>

If you would prefer to keep everything in one function and use alerts for the congrats message, you can do so by keeping track of then number of questions asked, and not instantly checking the answer on the first load, like this:如果您希望将所有内容保存在一个 function 中并为祝贺消息使用警报，您可以通过跟踪当时提出的问题数量来做到这一点，而不是在第一次加载时立即检查答案，如下所示：

 let score = 0; let questionsAnswered = -1; const imageContainer = document.getElementById('image'); const button = document.querySelector('button'); const input = document.getElementById('user-input'); const gameScore = document.getElementById('game-score-inner'); gameScore.add = (pts = 1) => gameScore.innerHTML = parseInt(gameScore.textContent) + 1; gameScore.subtract = (pts = 1) => gameScore.innerHTML = Math.max(parseInt(gameScore.textContent) - 1, 0); const options = { chad: 'https://via.placeholder.com/250x250/000000/efebe9/?text=Chad', bob: 'https://via.placeholder.com/250x250/000000/efebe9/?text=Bob', john: 'https://via.placeholder.com/250x250/000000/efebe9/?text=John' } function askQuestion() { questionsAnswered++; const optionsNames = Object.values(options); const randomPhoto = optionsNames[Math.floor(Math.random() * optionsNames.length)]; if (questionsAnswered) { const userGuess = options[input.value.toLowerCase()]; const correctAnswer = document.getElementById('question-image').getAttribute('src'); if (options[input.value.toLowerCase()] === correctAnswer) { gameScore.add(); alert('CONGRATULATIONS;.; YOU GUESSED IT RIGHT'), } else { gameScore;subtract(); alert('SORRY. IT WAS INCORRECT'); } questionsAnswered++. } imageContainer;innerHTML = `<img src="${randomPhoto}" id="question-image" width="250" height="250" />`; input.value = ''; } askQuestion();

 <p id="image"></p> <p id="game-score">Score: <span id="game-score-inner">0</span></p> <button onclick="askQuestion()">Check Answer!</button> <input id="user-input" type="text" />

Both solutions would work fine with alerts, though the first solution offers some greater flexibility for any functions you make want to perform in between questions.两种解决方案都可以很好地处理警报，尽管第一个解决方案为您想要在两个问题之间执行的任何功能提供了更大的灵活性。 One other main fix there was to make here was to check change the image after checking the answer, and also making sure to actually fun the function in the beginning using askQuestion() in this case.这里要做的另一个主要修复是在检查答案后检查更改图像，并确保在这种情况下使用askQuestion()在开始时真正有趣 function。 I also added a couple of handy functions gameScore.add() and gameScore.subtract() to ease future use.我还添加了几个方便的函数gameScore.add()和gameScore.subtract()以方便将来使用。

You can pass in other integers such as gameScore.add(2) if you every wanted to have double-weighted questions.如果您每个人都想有双重加权问题，您可以传入其他整数，例如gameScore.add(2) 。 I also added a Math.max() line to ensure the score never passes below 0. You can remove this if you would like the player's score to pass into negative numbers.我还添加了一个Math.max()行以确保分数永远不会低于 0。如果您希望玩家的分数变为负数，则可以将其删除。

如何调整代码，以便在网站加载时出现图像并且猜测是在猜测我希望它猜测的内容？

问题描述

2 个解决方案

解决方案1
0 2021-04-26 19:58:01

解决方案2
0 2021-04-26 20:51:45

如何调整代码，以便在网站加载时出现图像并且猜测是在猜测我希望它猜测的内容？

问题描述

2 个解决方案

解决方案1 0 2021-04-26 19:58:01

解决方案2 0 2021-04-26 20:51:45

解决方案1
0 2021-04-26 19:58:01

解决方案2
0 2021-04-26 20:51:45