All geek questions in one place

Buttons that control functions in javascripts

I make simple Javascript programs that I will run with different websites for my friends, and I try to use the dominance style program (call the standby game) using the buttons. I looked at the website and tried to use certain intervals for it, but I cannot figure out how to make the buttons access the script.

Here is my code:

<!DOCTYPE html> <html> <body> <p id = "blue"></p> <p id = "red"></p> <button onclick="StartA()">Start for Red</button> <button onclick="StopA()">Stop for red</button> <button onclick="StartB()">Start for Blue</button> <button onclick="StopB()">Stop for 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>
+4
source share
2 answers
  • JavaScript is case sensitive. You do not agree with the case. Traditionally, JavaScript functions and variables begin with a lowercase letter and are enclosed in a camel.
  • You reinitialized variables in functions that have already been initialized in the global scope.
  • You did not update ui with each change in rating, only at the beginning.

Below is the updated code that should run the way you plan. It might be worth turning your point guardians into a class, as they are redundant.

Updated Html

 <p id="blue"></p> <p id="red"></p> <button onclick="startA()">Start for Red</button> <button onclick="stopA()">Stop for red</button> <button onclick="startB()">Start for Blue</button> <button onclick="stopB()">Stop for 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();

jsFiddle

+6
source

The following code is what you are looking for. Changes:

  • Function names now match ( startA() => StartA(), startB() => StartB() , etc.)
  • <p> elements are updated within the interval (otherwise they are never updated)
  • Removing local vars from functions

Here you can view jsfiddle: http://jsfiddle.net/5tcNb/

 <body> <script> var startRed, startBlue; var redscore = 0, bluescore = 0; var r = 1, b = 1; function StartA() { startRed = setInterval(function() { redscore++; document.getElementById("red").innerHTML = redscore; }, 3000); }; function StartB() { startBlue = setInterval(function() { bluescore++; document.getElementById("blue").innerHTML = bluescore; }, 3000); }; function StopA() { clearInterval(startRed); }; function StopB() { clearInterval(startBlue); }; </script> <p id="blue">0</p> <p id="red">0</p> <button onclick="StartA()">Start for Red</button> <button onclick="StopA()">Stop for red</button> <button onclick="StartB()">Start for Blue</button> <button onclick="StopB()">Stop for Blue</button> </body>
0
source

Source: https://habr.com/ru/post/1495971/

More articles:


All Articles