CODEWITHSUNDEEP
javascripthtmlcss
PreYVin
PreYVin

Reputation: 1

Javascript not executing from text editor

I have tried searching for solutions to this question but still haven't found it. The HTML is executing fine but the Javascript is not executing. I have included it in the index.html file and tried an external .js file. Still can't get my javascript to execute. Also having issues with CSS not executing. Need some new eyes. Thanx...

<!doctype html>
<html>
<head>
<title> X-Ray Quiz </title>
<link href = “style.css” rel = “stylesheet”>
<link href = “https://fonts.googleapis.com/css?family=Lato” rel=    
“stylesheet”>


</head>

<body>
<h5><font color=orange > Quick Asessment </h5></font>

<form id = "quiz" name = "quiz">

<p> Identify this image </p>
<img src=name.jpg height=30% width=30%><br>
<input id= "textbox" type= "text" name= "question1">

<p> identify this image <p>
<img src= name.jpg height=30% width=30%><br>
<input type= "radio" type= "mc" name= "question2" value= "normal">  
normal <br>
<input type= "radio" type= "mc" name= "question2" value= “Choice”>   
COPD<br>

<input type= "radio" type= "mc" name= "question2" value= “Choice”>    
Choice<br>

<p> Identify this image <p>
<img src= name.jpg height=30% width = 30%><br>
<input type= "radio" type= "mc" name= "question3" value= “Normal”> 
Normal <br>

<input type= "radio" type= "mc" name= "question3" value=   
“choice”>choice<br>

<input type= "radio" type= "mc" name= "question3" value=   
“Asthma”>Asthma<br>


<input id= "button" type= "button" value= "Submit" onClick= 
"function();">


</form>
<div id = “after_submit”>
<p id = “number_correct”></p>

main.js

function  check () {
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;

If (question1 == “normal”) {
correct ++;
}
if (question2 == “COPD”) {
correct ++;
}
if (question3 == “Fibrosis”) {
correct ++;
}

document.getElementById(“after_submit”).style.visibility = “visible”;
document.getElementById(“number_correct”).innerHTML = “You got “ +    
correct + “correct.”;

}

var messages = [ “Great job”, “That’s just okay”, “ You really need to   
do better!”];

var range;

if (correct <1) {
range =2;

if (correct > 0 && correct<3) {
range = 1;
}

if (correct>2) {
range = 0;
}

document.getElementById(“after_submit”).style.visibility = “visible”;
document.getElementById(“message”).innerHTML = messages[range];
document.getElementById(“number_correct”).innerHTML = “ You got “ +   
correct + “ correct. “;


 }

Upvotes: 0

Views: 104

Answers (3)

AidanM
AidanM

Reputation: 57

Alright - like the others were saying, there were a lot of errors in your code. I went and tried to correct your code as best as I could, but I also noticed that there was no message element. I added that, and now the program works. Of course, there's no CSS to add to this snippet, so it looks a bit bland. hope this works for you!

function check () {
    var question1 = document.quiz.question1.value;
    var question2 = document.quiz.question2.value;
    var question3 = document.quiz.question3.value;
    var correct = 0;
    
    if (question1 == 'normal') {
    correct ++;
    }
    if (question2 == 'COPD') {
    correct ++;
    }
    if (question3 == 'Fibrosis') {
    correct ++;
    }   
    document.getElementById('after_submit').style.visibility = 'visible';
    document.getElementById('number_correct').innerHTML = 'You got ' + correct + 'correct.';
    
    
    
    var messages = [ 'Great job', 'That’s just okay', ' You really need to   do better!'];
    
    var range;
    
    if (correct <1) {
    range =2;
    
    if (correct > 0 && correct<3) {
    range = 1;
    }
    
    if (correct>2) {
    range = 0;
    }
    
    document.getElementById('after_submit').style.visibility = 'visible';
    document.getElementById('message').innerHTML = messages[range];
    document.getElementById('number_correct').innerHTML = ' You got ' + correct + ' correct. ';
    
    
     } 
}
<!doctype html>
<html>
<head>
<title> X-Ray Quiz </title>
<link href = 'style.css' rel = 'stylesheet'>
<link href = 'https://fonts.googleapis.com/css?family=Lato' rel=    
'stylesheet'>
<script src="JS/scripts.js"></script>

</head>

<body>
<h5><font color=orange > Quick Asessment </h5></font>

<form id = "quiz" name = "quiz">

<p> Identify this image </p>
<img src=name.jpg height=30% width=30%><br>
<input id= "textbox" type= "text" name= "question1">

<p> identify this image <p>
<img src= name.jpg height=30% width=30%><br>
<input type= "radio" type= "mc" name= "question2" value= "normal">  
normal <br>
<input type= "radio" type= "mc" name= "question2" value= 'Choice'>   
COPD<br>

<input type= "radio" type= "mc" name= "question2" value= 'Choice'>    
Choice<br>

<p> Identify this image <p>
<img src= name.jpg height=30% width = 30%><br>
<input type= "radio" type= "mc" name= "question3" value= 'Normal'> 
Normal <br>

<input type= "radio" type= "mc" name= "question3" value=   
'choice'>choice<br>

<input type= "radio" type= "mc" name= "question3" value=   
'Asthma'>Asthma<br>


<input id= "button" type= "button" value= "Submit" onclick= 
"check();">


</form>
<div id = 'after_submit'>
<p id = 'number_correct'></p>
<p id='message'></p>
</div>
</body>
</html>

Upvotes: 0

Mark
Mark

Reputation: 92440

There are lots of errors in the code, so even if it's wired up correctly, it's not going to run.

For example:

If (question1 == “normal”) {/* ...etc */ }

If should be lower case. And those quote marks are fancy quotes “ rather than ". I don't know if all interpreters choke on those, but mine does.

Also you are defining correct in the function check() but then try to access it outside the function, where it is no longer in scope. This results in an error.

All these errors are easy to find if you use the browser console — they are all listed there. In Chrome it's Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).

Upvotes: 0

limits
limits

Reputation: 295

First of all, your JavaScript file isn't linked to your HTML. You may need to add:

<script src="main.js"><script>

(Or is your HTML cut off and it's at the end?)

In your HTML you aren't calling the right JavaScript function:

<input id= "button" type= "button" value= "Submit" onClick="function();">

Now, your JavaScript reads

function check () { ... }

So it should be onClick="check();" because that is the name of your function.

Upvotes: 1

Related Questions