<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>
<Below this line, add a link to the EXACT exercise that you are stuck at.>
<In what way does your code behave incorrectly? Include ALL error messages.>
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!
```
Geography Quiz!
Welcome to Free Wheat!
Take the Geo Quiz:
Click Here!
Question 1:
Question 2:
Question 3:
Question 4:
Question 5:
<!--
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;
}
–>
<do not remove the three backticks above>
@amanocoder,
<!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>
<br>
<h1>Take the Geo Quiz:</h1>
<button onclick="Quiz()">Click Here!</button>
<br>
<br>
<div></div>
<span>
<h1><u>Question 1:</u></h1> <p id="q1"></p>
<h1><u>Question 2:</u></h1> <p id="q2"></p>
<h1><u>Question 3:</u></h1> <p id="q3"></p>
<h1><u>Question 4:</u></h1> <p id="q4"></p>
<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>
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>
<br>
<h1>Take the Geo Quiz:</h1>
<button onclick="Quiz()">Click Here!</button>
<br>
<br>
<div></div>
<span>
<h1><u>Question 1:</u></h1> <p id="q1"></p>
<h1><u>Question 2:</u></h1> <p id="q2"></p>
<h1><u>Question 3:</u></h1> <p id="q3"></p>
<h1><u>Question 4:</u></h1> <p id="q4"></p>
<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>
@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…