Result not showing in the corresponding paragraph

Question

For some unknown reason(console doesn't show it), it's not showing the response to the input like "the answer is right" or "the answer is either empty or wrong"

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>  
  <body>
    <h1>Hi there!</h1>     
    <p id="check1">
     The result will be shown here
    </p>     
    
    
    <input type="text" id="word0" placeholder="enter what you heard " /> 
    <script>     
    function check()
    { 
      var arr=["cat","dog","fish","husky","jasmine"]
      
      var answer1=document.getElementById("word0").value
     
        if (answer1==arr[0] )
         {document.getElementById("check1").innerHTML="The answer is right"}
      
      else {document.getElementById("check1").innerHTML="The answer is either empty or wrong, please reenter"
              var answercat=[]
              answercat[0]=prompt("enter the word cat for the first time:")
               if(answercat[0]!="cat")
                 {prompt("you entered wrong word, enter the word 'cat' one more time")}
              answercat[1]=prompt("enter the word cat for the second time:")
                   if(answercat[1]!="cat")
                 {prompt("you entered wrong word, enter the word 'cat' one more time")}
              answercat[2]=prompt("enter the word cat for the third time:")
                  if(answercat[2]!="cat")
                 {prompt("you entered wrong word, enter the word 'cat' one more time")}
              answercat[3]=prompt("enter the word cat for the fourth time:")
                  if(answercat[3]!="cat")
                 {prompt("you entered wrong word, enter the word 'cat' one more time")}
              answercat[4]=prompt("enter the word cat for the fifth time:")
                  if(answercat[4]!="cat")
                 {prompt("you entered wrong word, enter the word 'cat' one more time")}
              
             }
    }
 
    
    
    </script>
    
    <button onclick="check()">
       
    </button>
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

Thank you in advance!

Who need to actually call the `check()` function. Also, why are you passing an `answer` parameter, if you're not going to use it? — Blue, Nov 18 '19 at 01:42
https://glitch.com/edit/#!/rural-astronaut?path=index.html:57:5 . The complete version is here. Still not showing after calling the function — Jiang Yuxin, Nov 18 '19 at 01:55
Please always post your code right here in your question. I've copied your code over and it appears to work properly. — Scott Marcus, Nov 18 '19 at 01:56
@JiangYuxin, Whether you will check for result once the check button is clicked? — Maniraj Murugan, Nov 18 '19 at 02:01

Maniraj Murugan · Accepted Answer · 2019-11-18T02:13:51.560

1

First add event listener to the input then call the check() function on input.

If you are using any HTML elements then use .innerHTML otherwise use textContent..

function check()
{ 
  const arr=["cat","dog","fish","husky","jasmine"]
  
  const  answer1 = document.getElementById("word0").value
 
    if (answer1 === arr[0] )
     {
  document.getElementById("check1").textContent="The answer is right"
     }
  
  else {
    document.getElementById("check1").textContent="The answer is either empty or wrong, please reenter"
          var answercat=[]
          answercat[0]=prompt("enter the word cat for the first time:")
           if(answercat[0]!="cat")
             {prompt("you entered wrong word, enter the word 'cat' one more time")}
          answercat[1]=prompt("enter the word cat for the second time:")
               if(answercat[1]!="cat")
             {prompt("you entered wrong word, enter the word 'cat' one more time")}
          answercat[2]=prompt("enter the word cat for the third time:")
              if(answercat[2]!="cat")
             {prompt("you entered wrong word, enter the word 'cat' one more time")}
          answercat[3]=prompt("enter the word cat for the fourth time:")
              if(answercat[3]!="cat")
             {prompt("you entered wrong word, enter the word 'cat' one more time")}
          answercat[4]=prompt("enter the word cat for the fifth time:")
              if(answercat[4]!="cat")
             {prompt("you entered wrong word, enter the word 'cat' one more time")}
          
         }
}

const btn = document.querySelector('button');

btn.addEventListener('click',check)

<h1>Hi there!</h1>     
<p id="check1">
 The result will be shown here
</p>     


<input type="text" id="word0" placeholder="enter what you heard " /> 

<button>
   Check
</button>

<!-- include the Glitch button to show what the webpage is about and
      to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>

edited Nov 18 '19 at 02:13

answered Nov 18 '19 at 01:50

Maniraj Murugan

8,868
20
67
116

Close, but if you use the `input` event, the function would get called upon each character input and therefore show the "incorrect" message before you were even done typing in the answer. In this case, the `change` event is the way to go. – Scott Marcus Nov 18 '19 at 01:51
Hi, thank you. Here is the more complete version of my question:https://glitch.com/edit/#!/rural-astronaut?path=index.html:57:5 . It's not working even though I called the function – Jiang Yuxin Nov 18 '19 at 01:52
@ScottMarcus, Yuo are right, but OP mention about how he need the result. – Maniraj Murugan Nov 18 '19 at 01:56
The OP doesn't say he wants the `input` event. He just means that the answer (based on the input) doesn't show up. – Scott Marcus Nov 18 '19 at 01:57
@ScottMarcus, Yes now he edits the question and he wants to check it on button click it seems will edit my answer.. – Maniraj Murugan Nov 18 '19 at 02:00
Hi, Could you see the bug here? I am so confused because it's supposed to be simple codes – Jiang Yuxin Nov 18 '19 at 02:11
Hi thanks! Now I have another question: how can I make the result appear in the paragraph before the prompt box? – Jiang Yuxin Nov 18 '19 at 02:17
@ManirajMurugan Because when I run the code snippet the prompt goes before the result, but I want the user to see their result first – Jiang Yuxin Nov 18 '19 at 02:19
@JiangYuxin, You mean before opening the prompt you need to display the wron result first then prompt should open? – Maniraj Murugan Nov 18 '19 at 02:20
Yes exactly, is it possible to do that? – Jiang Yuxin Nov 18 '19 at 02:22
@ManirajMurugan . for clarification I just want it to display " the answer is wrong" and then prompt opens, no need to display the wrong answer – Jiang Yuxin Nov 18 '19 at 02:23
@JiangYuxin, whether this is you expectation https://codepen.io/manmur/pen/JjjwWmz ? – Maniraj Murugan Nov 18 '19 at 02:39
@ManirajMurugan . Yes exactly but I have not learnt settimeout method. Do you mind try it here? https://glitch.com/edit/#!/reinvented-ringer?path=index.html:199:6 – Jiang Yuxin Nov 18 '19 at 02:59
@JiangYuxin, Take a look at here https://glitch.com/edit/#!/sugar-stove?path=index.html:100:15 .. Settimeout is used to wait for the time mentioned then it will execute.. – Maniraj Murugan Nov 18 '19 at 03:04
@ManirajMurugan Hi，thank you but it doesn't seem to be working ? – Jiang Yuxin Nov 18 '19 at 03:14
@JiangYuxin, Then something wrong with your implementation and I don't know about this glitch so take up my solution try to figure out what you are trying to do in your application.. – Maniraj Murugan Nov 18 '19 at 03:17

score 0 · Answer 2 · answered Nov 18 '19 at 01:46

0

Because you don't even call this function. If you want to call it everytime input is changed set onchange=check(this.value) to your input.

answered Nov 18 '19 at 01:46

sobczi

121
7

1

While you are right that there needs to be an event handler set up. Please [don't advocate inline HTML event attributes, like `onXyz`](https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991). It's not 1995, JavaScript belongs separated from HTML and events are bound with `.addEventListener()`. – Scott Marcus Nov 18 '19 at 01:49

Result not showing in the corresponding paragraph

2 Answers2