Why is quiz not defined!


#1



When I call the function "Quiz" that I made when you click the button, it says "Quiz is not defined even though I have clearly defined it in the script. I don't know why. (also the edited out part is the CSS for this website.) Thanks!


                     <DOCYTYPE html>
<html>
  <head>
<title>Geography Quiz!</title>
</head>
<body background="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Blank_globe.svg/2000px-Blank_globe.svg.png">
  <center><h1><f><j>Welcome to <u>Free Wheat!</u></j></f></h1></center>
  <div></div>
  &nbsp;
  <br>
  <h1>Take the Geo Quiz:</h1>
  &nbsp;
  <button onclick="Quiz"()>Click Here!</button> 
  <br>
  <br>
  <div></div>
 &nbsp;
  
<span>
 <h1><u>Question 1:</u></h1> <p id="q1"></p> 
&nbsp;  
<h1><u>Question 2:</u></h1> <p id="q2"></p>
&nbsp;  
<h1><u>Question 3:</u></h1> <p id="q3"></p>
&nbsp;  
  <h1><u>Question 4:</u></h1> <p id="q4"></p> 
&nbsp;  
<h1><u>Question 5:</u></h1> <p id="q5"></p>
  </span>
<script>
var Quiz = function(){
var q1 = prompt("Which state has a climate suitable for growing citrus fruits? California or Maine?");
	if(q1 ==="California" || "california" ) {
		document.getElementById("q1").innerHTML = "Correct!";
	} else {
	document.getElementById("q1").innerHTML = "Incorrect.";	
	}
  
  var q2 = prompt("The North Atlantic current brings warm waters from the tropics to the west coast of which continent?
");
	if(q2 ==="Europe" || "europe) {
		document.getElementById("q2").innerHTML = "Correct!";
	} else {
	document.getElementById("q2").innerHTML = "Incorrect.";	
	}
  
  var q3 = prompt("What is the term for a part of an ocean or sea that cuts far into the bordering landmass and may contain one or more bays?");
	if(q3 ==="gulf" || "Gulf) {
		document.getElementById("q3").innerHTML = "Correct!";
	} else {
	document.getElementById("q3").innerHTML = "Incorrect.";	
	}
  
  var q4 = prompt("To visit the ruins of Persepolis, an ancient ceremonial capital of Persia, you would have to travel to what present-day country?");
	if(q4 ==="Iran" || "iran") {
		document.getElementById("q4").innerHTML = "Correct!";
	} else {
	document.getElementById("q4").innerHTML = "Incorrect.";	
	}
  
  var q5 = prompt("What is the largest state in the US.");
  if(q5 ==="Alaska" || "alaska") {
		document.getElementById("q5").innerHTML = "Correct!";
	} else {
	document.getElementById("q5").innerHTML = "Incorrect.";	
	}
}	
  
</script>

  
  
  </body>
  </html>
  <!--

f {
  font-family: Consolas;
  font-size: 50px;
  color: #00BFFF;
}

j {
  font-family: Garamond;
  font-size: 70px;
  color: black;
}


div{
border: solid black 4px;
}
button {
border: solid blue 2px;
  background-color: #D7F2BB;
}
input {
border: solid blue 2px;
}
p {
font-size: 30px;
  text-align: center;
}

span h1 {
  text-align: center;
}



-->


#2

@amanocoder,

  • change:
    <DOCYTYPE html> into <!DOCTYPE html>
  • look at the =onclick

  • Change
    if(q2 ==="Europe" || "europe) {
    into
    if(q2 ==="Europe" || "europe") {

<!DOCTYPE html>
<html>
  <head>
<title>Geography Quiz!</title>
<style>
f {
  font-family: Consolas;
  font-size: 50px;
  color: #00BFFF;
}

j {
  font-family: Garamond;
  font-size: 70px;
  color: black;
}

div{
border: solid black 4px;
}
button {
border: solid blue 2px;
  background-color: #D7F2BB;
}
input {
border: solid blue 2px;
}
p {
font-size: 30px;
  text-align: center;
}

span h1 {
  text-align: center;
}
</style>
</head>
<body background="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Blank_globe.svg/2000px-Blank_globe.svg.png">
  <center><h1><f><j>Welcome to <u>Free Wheat!</u></j></f></h1></center>
  <div></div>
  &nbsp;
  <br>
  <h1>Take the Geo Quiz:</h1>
  &nbsp;
  <button onclick="Quiz()">Click Here!</button> 
  <br>
  <br>
  <div></div>
 &nbsp;
  
<span>
 <h1><u>Question 1:</u></h1> <p id="q1"></p> 
&nbsp;  
<h1><u>Question 2:</u></h1> <p id="q2"></p>
&nbsp;  
<h1><u>Question 3:</u></h1> <p id="q3"></p>
&nbsp;  
  <h1><u>Question 4:</u></h1> <p id="q4"></p> 
&nbsp;  
<h1><u>Question 5:</u></h1> <p id="q5"></p>
  </span>
<script>
var Quiz = function(){
alert("Hallo!");
var q1 = prompt("Which state has a climate suitable for growing citrus fruits? California or Maine?");
	if(q1 ==="California" || q1 ==="california" ) {
		document.getElementById("q1").innerHTML = "Correct!";
	} else {
	document.getElementById("q1").innerHTML = "Incorrect.";	
	}
  
  var q2 = prompt("The North Atlantic current brings warm waters from the"+
                  " tropics to the west coast of which continent?");
	if( q2.toUpperCase() ==="EUROPE") {
		document.getElementById("q2").innerHTML = "Correct!";
	} else {
	document.getElementById("q2").innerHTML = "Incorrect.";	
	}
  
  var q3 = prompt("What is the term for a part of an ocean or sea that cuts far into the bordering landmass and may contain one or more bays?");
	if(q3 ==="gulf" || "Gulf") {
		document.getElementById("q3").innerHTML = "Correct!";
	} else {
	document.getElementById("q3").innerHTML = "Incorrect.";	
	}
  
  var q4 = prompt("To visit the ruins of Persepolis, an ancient ceremonial capital of Persia, you would have to travel to what present-day country?");
	if(q4 ==="Iran" || "iran") {
		document.getElementById("q4").innerHTML = "Correct!";
	} else {
	document.getElementById("q4").innerHTML = "Incorrect.";	
	}
  
  var q5 = prompt("What is the largest state in the US.");
  if(q5 ==="Alaska" || "alaska") {
		document.getElementById("q5").innerHTML = "Correct!";
	} else {
	document.getElementById("q5").innerHTML = "Incorrect.";	
	}
}	
  
</script>
  </body>
  </html>

#3

Thank you very much.


#4

But when I run my code in some other browsers it still says Quiz is not defined.

<html>
  <head>
<title>Geography Quiz!</title>
<style>
f {
  font-family: Consolas;
  font-size: 50px;
  color: #00BFFF;
}

j {
  font-family: Garamond;
  font-size: 70px;
  color: black;
}

div{
border: solid black 4px;
}
button {
border: solid blue 2px;
background-color: #85D3ED;
height: 30px;
}
input {
border: solid blue 2px;
}
p {
font-size: 25px;
  text-align: center;
}

span h1 {
  text-align: center;
}
</style>
</head>
<body background="http://res.freestockphotos.biz/pictures/8/8578-illustration-of-wheat-leaves-pv.png">
  <center><h1><f><j>Welcome to <u>Free Wheat!</u></j></f></h1></center>
  <div></div>
  &nbsp;
  <br>
  <h1>Take the Geo Quiz:</h1>
  &nbsp;
  <button onclick="Quiz()">Click Here!</button> 
  <br>
  <br>
  <div></div>
 &nbsp;
  
<span>
 <h1><u>Question 1:</u></h1> <p id="q1"></p> 
&nbsp;  
<h1><u>Question 2:</u></h1> <p id="q2"></p>
&nbsp;  
<h1><u>Question 3:</u></h1> <p id="q3"></p>
&nbsp;  
  <h1><u>Question 4:</u></h1> <p id="q4"></p> 
&nbsp;  
<h1><u>Question 5:</u></h1> <p id="q5"></p>
  </span>
<script>
var Quiz = function(){
var q1 = prompt("Which state has a climate suitable for growing citrus fruits? California or Maine?");
	if(q1 ==="California" || q1 ==="california" ) {
		document.getElementById("q1").innerHTML = "Correct!";
	} else {
	document.getElementById("q1").innerHTML = "Incorrect.";	
	}
  
  var q2 = prompt("The North Atlantic current brings warm waters from the"+
                  " tropics to the west coast of which continent?");
	if( q2 ==="Europe" || q2 ==="europe") {
		document.getElementById("q2").innerHTML = "Correct!";
	} else {
	document.getElementById("q2").innerHTML = "Incorrect.";	
	}
  
  var q3 = prompt("What is the term for a part of an ocean or sea that cuts far into the bordering landmass and may contain one or more bays?");
	if(q3 ==="gulf" || q3 === "Gulf") {
		document.getElementById("q3").innerHTML = "Correct!";
	} else {
	document.getElementById("q3").innerHTML = "Incorrect.";	
	}
  
  var q4 = prompt("To visit the ruins of Persepolis, an ancient ceremonial capital of Persia, you would have to travel to what present-day country?");
	if(q4 ==="Iran" || q4 === "iran") {
		document.getElementById("q4").innerHTML = "Correct!";
	} else {
	document.getElementById("q4").innerHTML = "Incorrect.";	
	}
  
  var q5 = prompt("What is the largest state in the US.");
  if(q5 ==="Alaska" || q5 === "alaska") {
		document.getElementById("q5").innerHTML = "Correct!";
	} else {
	document.getElementById("q5").innerHTML = "Incorrect.";	
	}
}	
  
</script>
  </body>
  </html>

#5

@amanocoder,
The only thing i can see that your are NOT using

<!DOCTYPE html>

Which Browser are you using ??
It's name, version-nr and on which Operating System....