html5 - Buttons controlling functions in javascripts -
i have been making simple javascript programs run different websites friends, , have been trying make domination style (call of duty gamemode) program using buttons. have looked @ website , have tried using set intervals can't figure out how make buttons access script.
here code:
<!doctype html> <html> <body> <p id = "blue"></p> <p id = "red"></p> <button onclick="starta()">start red</button> <button onclick="stopa()">stop red</button> <button onclick="startb()">start blue</button> <button onclick="stopb()">stop blue</button> <script> var startred; var startblue; var r=1; var b=1; var starta = function(){ var startred = setinterval(function(){redscore++};,3000) }; var startb = function(){ var startblue = setinterval(function(){bluescore++};,3000) }; var stopa = function(){ clearinterval(startred); }; var stopb = function() { clearinterval(startblue); }; document.getelementbyid("blue").innerhtml=bluescore; document.getelementbyid("red").innerhtml=redscore; </script> </body> </html>
- javascript case sensitive. not consistent case. traditionally, javascript functions , variables start lower case letter , camel cased.
- you reinitializing variables in functions initialized in global scope.
- you weren't updating ui each score change, @ start.
below updated code should run intend. might worth while turn score keepers class, since redundant.
updated html
<p id="blue"></p> <p id="red"></p> <button onclick="starta()">start red</button> <button onclick="stopa()">stop red</button> <button onclick="startb()">start blue</button> <button onclick="stopb()">stop blue</button> updated javascript
var startred; var startblue; var bluescore = 1; var redscore = 1; function starta() { stopa(); startred = setinterval(function () { redscore++; updateui(); }, 3000) }; function startb() { stopb(); startblue = setinterval(function () { bluescore++; updateui(); }, 3000) }; function stopa() { clearinterval(startred); }; function stopb() { clearinterval(startblue); }; function updateui() { document.getelementbyid("blue").innerhtml = bluescore; document.getelementbyid("red").innerhtml = redscore; } updateui();
Comments
Post a Comment