Can't get my function to act properly
Question
Ok, so I'm having a hard time with functions not working with the rest of my code. I've checked for spelling errors, tried debugging, ect. My button (makeSong) that is supposed to run the song "Ants go marching down" with verses and chorus, but when I push the button on the page it just stays the same. Why is this happening? Functions have been giving me a really difficult time. I hope I explained my question well, this is only my second question and I am a self taught newbie. So if you guys could take a look and maybe explain why my code isn't right. Am I putting the functions in the wrong place? I'm confused.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8"></meta>
<title>AntsFunction.html</title>
<script type="text/javascript">
// from AntsFunction.html
var output;
function chorus(){
var text= "...and they all go marching down<br/>";
text += "to the ground<br/>";
text += "to get out<br/>";
text += "of the rain.<br/>";
text += "<br/>";
text += "boom boom boom boom boom boom boom boom<br/><br/>";
output.innerHTML += text;
} // end chorus
function verse1(){
var text= "The ants go marching 1 by 1 hurrah, hurrah<br/>";
text += "The ants go marching 1 by 1 hurrah, hurrah<br/>";
text += "The ants go marching 1 by 1<br/>";
text += "The little one stops to suck his thumb<br/><br/>";
output.innerHTML += text;
} // end verse1
function verse2(){
var text= "The ants go marching 2 by 2 hurrah, hurrah<br/>";
text += "The ants go marching 2 by 2 hurrah, hurrah<br/>";
text += "The ants go marching 2 by 2<br/>";
text += "The little one stops to tie his shoe<br/><br/>";
output.innerHTML += text;
} // end verse2
function makeSong(){
ouput=document.getElementById("output");
output.innerHTML="";
verse1();
chorus();
verse2();
chorus();
} // end makeSong
</script>
</head>
<body>
<h1>Using Basic Functions</h1>
<form action="">
<fieldset>
<button type="button"
onclick="makeSong">
Make Song
</button>
</fieldset>
</form>
<div id="output">
The song will appear here...
</div>
</body>
</html>
1 answers
solution1
0 2015-04-15 15:47:44
2 things:
in the HTML change this line
<button type="button" onclick="makeSong">
to
<button type="button" onclick="makeSong();">
typo in the js at the beginning of the makeSong function:
ouput=document.getElementById("output");
the "t" is missing ou t put
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.