passing an html id into javascript function -
passing an html id into javascript function -
i learning javascript , not understand how pass id html javascript function.
my css page has here:
#quizclock
(with properties here)
and on html page have javascript function so:
<script type="text/javascript"> var seconds = 0; var clockid; function runclock() { seconds + 1; quizclock = seconds; //right here problem. } function startclock() { showquiz(); runclock(); setinterval("runclock()", 1000); } function stopclock() { clearinterval(runclock); gradequiz(); homecoming = correctans; alert("you have " + correctans + " right out of 5 in " + quizclock + " seconds."); } </script>
so need utilize id quizclock in function. tips?
i noticed few other problems code, i've commented fixes , added couple of other tips too.
var seconds = 0; var clockid; var correctans; // lets reference quizclock element , save in // variable named quizclock var quizclock = document.getelementbyid('quizclock'); function runclock() { // seconds + 1; // calculates seconds + 1 , throws away, // need save in variable // with: // seconds = seconds + 1; // improve shorthand: seconds += 1; // set html within of quizclock element new time quizclock.innerhtml = seconds; } function startclock() { showquiz(); runclock(); // setinterval("runclock()", 1000); // when using setinterval , settimeout // want straight pass function name. passing // string "runclock()" in effect running // eval("runclock()"), eval should avoided unless // need it. // setinterval returns number identifies interval, // need save number, you'll need when // phone call clearinterval clockid = setinterval(runclock, 1000); } function stopclock() { // clearinterval takes id setinterval // returned clear interval clearinterval(clockid); gradequiz(); // had alert statment after homecoming statement, // have never run, homecoming statements end // function , after them ignored alert("you have " + correctans + " right out of 5 in " + quizclock + " seconds."); //return = correctans; // homecoming statement doesn't need =, // homecoming = correctans says set variable named homecoming // value of correctans since homecoming reserved word, // should generate error homecoming correctans; }
some useful reference links: setinterval clearinterval getelementbyid reserved words (things can't used variable names) assignment operators (more shortcut operators listed here) introducing javascript dom an inconvenient api: theory of dom if formal class might have utilize basic dom methods elements (getelementbyid
, etc). if learning on own encourage larn dom library. suggest jquery, easy learn , more or less de facto standard. jquery instead of document.getelementbyid('quizclock')
this: $('#quizclock')
. using jquery makes code little shorter, standardizes things between different browsers , helps protect bugs in browsers.
you beginner now, in little examples don't need worry global variables, should know bad thought utilize many of them. if function on page used global variable named seconds
? might alter seconds
, screw timer. getting little advance, 1 way avoid wrap code in self-invoking anonymous function:
(function () { var seconds = 0; // within here seconds visible , can used }()); // outside seconds not declared, homecoming undefined.
unfortunately functions within not visible on outside, attaching them via onclick=
wouldn't work (should) attach them in using dom:
var submitbutton = document.getelementbyid('submitanswers'); // you'll have give button id submitbutton.addeventlistener('click', stopclock, false);
again, using jquery create easier:
$('#submitanswers').on('click', stopclock);
likewise if utilize jquery, forces wrap code in function maintain variables out of globalnamespace:
$(document).ready(function () { var seconds; // 1 time again seconds visible here }); // not here
javascript html function variables
Comments
Post a Comment