How to make this countdown start on click?

Question

https://code.sololearn.com/Wt8qVWz6waxp/?ref=app
And I need it to work without changing background-color and other css I may add later.

Answer 1

visph

1. Sure! I didn't want to show something that wasn't necessary. And personally I find function definitions polluting global namespace less problematic than variables doing it. But since this is not part of the main question, let's discuss this in a private message.

2. I didn't know function names can have conflict with element id. Actually I never really noticed the id there (which is not necessary as of now). But still, it didn't seem to cause any trouble when I ran it.

Answer 2

Check again my code(looks like it works)

Answer 3

I tried but i want it to start on click .
Check my code. When i press the button it count down -1.

Answer 4

I tried but i want it to start on click .
Check my code. When i press the button it count down -1.

Answer 5

Kishalaya Saha:

1> if you want to avoid using global variables (good practice), you need also to embed the JS code in an IIFE (Immediatly Invoked Function Execution), as else the function definitions themselves would "pollute" the global space", and so it's require to define the onclick handler at runtime rather than in the html attribute (wich is quite difficult to understand for beginners, all the more that you need also to defer the event initialization after the page is fully loaded trough a document.onload-like event or put the JS script after the button declaration to be available in the DOM for the script)

2> "start" is name in conflict with the id value of the button... and since the JS code is executed before the button is parsed, the implicit browser behavior of declaring global var with id name of Html element reference, the global "start" function will be replaced (deleted) by this assignation

Answer 6

Kishalaya Saha :

1> I haven't access to the private message feature because I haven't updated the app since a while (about the time where SL introduce adversiting in it :P)

2> my bad... you're right, it doesn't conflict: maybe I've making my first test too quickly ^^

Answer 7

You can add a "Start" button and call the decrease_count function when onclick event is triggered.
https://www.w3schools.com/jsref/event_onclick.asp

Answer 8

keep the var timer as global, and embed the line initializing the countdown in a function (avoid give it the same name as an id attribute to prevent the function to be overided by the implicit global variable declaration related to id of html elements):

var timer;
function startcountdown() {
timer = setInterval(decrease_count, 1000)
}

and call it in the onclick attribute of your button (you should place the JS code inside quote):

onclick="startcountdown()"

Answer 9

Kishalaya Saha : not necessary to put "everything from lines 4-11" in another function, and "start()" will not work, unless there's an element with id="start" in the code (the button itself in this case) and the JS code is declared before it (in the head section, for the JS tab in code playground) ;)

Answer 10

visph I'm not sure what you mean, but this is what I was trying to say:

function callback() {
document.write("Died.");
}

function start(){
function decrease_count(){
var div = document.getElementById('countdown');
if( --div.innerHTML == 0 ) {
clearInterval(timer);
callback();
}
}
var timer = setInterval(decrease_count, 1000);
}

And on HTML, just calling start() instead of decrease_count().

This works fine on my phone, and I prefer this approach because I'm not fond of using global variables.

Answer 11

Why don't you update your app?

Answer 12

💧Alex Tusinean🔥 : expecting avoid ads... as much as possible.

Kishalaya Saha : ... but I suffer at least part of them: seems that SL have prepared the ground at least few version before injecting them in the app :( (this is mostly annoying when I connect through mobile without free wifi available, as it increase drastically the cost -- and I'm not Rockfeller at all, conversely, I seriously miss money to assume bills and food)

Answer 13

About the behavior of html id reference silently assigned in the global scope: it seems that browsers prevent overwrite of already existing (and so conflicting name) variable/function... but not using same name to id and user variables/functions in global scope, let you access to those reference without the use of document.getElementById() (or other methods to select element):

<div id="mydiv">div content</div>
<script>
alert(mydiv+'\n'+mydiv.innerHTML);
</script>

... work fine :)

And some smart JS library/framework trying to avoid overwriting of user custom global variables could raise exception if you use id name they expect to be available, such as p5.js and the global name "log":

https://www.sololearn.com/Discuss/1610434/?ref=app

Answer 14

Oh sorry, don't call decrease_count() at onclick event. Make another function, say start() containing everything from lines 4-11 of your JS. And call this function on click.

Does that make sense?

Edit: visph's method should work too.

Answer 15

Accessory, the clearInterval() is not required, as the page is reinitialized by the document.write() occurring after the page is fully loaded ^^
(but it's cleaner practice, and should be here if the method to remove the button is changed)

Answer 16

💧Alex Tusinean🔥
Yes, indeed! Great job!

Answer 17

visph Haha, good idea to avoid ads 👍