trying to make JS practice snippet on cloud9 [on hold]
Hello now i'm on some JS class
and i made a snippet but a button is not work
plz help me and give me a tip there is something wrong or i need learn
Thank you
here is link if you have cloud9 id https://c9.io/hyunhee26/lab3
//lap3 html
<!DOCTYPE html>
<html>
<head>
<title>This is Lab3 by Hyunhee Shin</title>
<link rel='stylesheet' type='text/css' href = 'style.css'>
<script type="text/javascript" src="js.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="mainContent">
<h1>Be a quiz <br> king!</h1>
<p>Enjoy your five <br> quizzes. </p>
<button id="clickButton" class="buttonStyle">click me</button><br>
</div>
</body>
</html>
//js.js
var question= ['When is the first day of spring? (MM/DD)',
'Who is the president in the U.S.A now? (last name)',
'What is the shortest month?',
'What is the largest city in Texas?',
'How many colors does a rainbow has?'];
var answer= ['03/21', 'Obama', 'February', 'Houston', '7'];
function quizStart() {
for (var i = 0 ; i < 5 ; i++) {
document.write(question[i] + '<br>');
var userChoice = prompt(question[i]);
if (userChoice === answer[i]){
document.write(userChoice + '<br>' + 'Good job!' + '<br><br>');
} else {
document.write(userChoice + '<br>' + 'Sorry! That is not a
correct answer.' + '<br><br>');
}
}
}
function yeah(){
document.getElementById("clickButton").onClick = "quizStart()";
}
//style.css
body{
background-color: yellowgreen;
}
#mainContent {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
font-weight: bold;
background-color: yellowgreen;
border-radius: 4px;
padding: 10px;
text-align: center;
}
.buttonStyle {
border-radius: 4px;
border: thin solid #F0E020;
padding: 5px;
background-color: #F8F094;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
color: #663300;
width: 75px;
}
.buttonStyle:hover {
border: thin solid #FFCC00;
background-color: #FCF9D6;
color: #996633;
cursor: pointer;
}
.buttonStyle:active {
border: thin solid #99CC00;
background-color: #F5FFD2;
color: #669900;
cursor: pointer;
}
No comments:
Post a Comment