I want to trigger a JavaScript when a counter reaches a specific number, such as 10.
How do I do this?
<button onclick="stepupfunction()"> PRESS ME </button>
<script>
document.addListener('onLoad', function documentLoaded(e) {
document.getElementById("score").value = store.get('putAKeyHere') || 0;
})
function stepupfunction() {
document.getElementById("score").stepUp(1);
store.set('putAKeyHere',document.getElementById("score").value)
}
</script>
Something like the following should work:
function stepupfunction() {
var num = document.getElementById("score");
num.stepUp(1);
store.set('putAKeyHere', num.value);
if (num.value >= 10) {
// DO SOMETHING
}
}
Related
<html>
<body>
<button onclick = 'click1()'> </button>
</body>
<script>
var one
function click1(){
one = one + 1;
}
if (one == 3){
document.write('yes')
}
</script>
</html>
Here is an example JS / HTML. How can I write yes if the button is clicked three times?. This code would work in python and other languages. How can I do this in JS?
Your code have syntax and logical errors
<html>
<body>
<button onclick='click1()'>click here </button>
<script>
var one = 0;
function click1(){
one = one + 1;
if (one == 3){
alert("here");
}
}
</script>
</body>
</html>
after three clicks you will again have to reset variable one in if statement
if (one == 3){
alert("here");
one = 0;
}
There are multiple issues here.
First of all you should set a default to the variable, otherwise it will be declared as undefined.
Second you should put your if in the same function.
Third you should call your functions with the brackets in your html => 'click1()'
I also recommend making some changes
make your variable a let instead of a var.
use typesafe checks with 3 equal signs
<html>
<body>
<button onclick = 'click1()'> </button>
<script>
let one = 0;
function click1(){
one += 1;
if (one === 3){
document.write('yes')
}
}
</script>
</body>
</html>
var one = 0;
function click1() {
one++
if (one == 3) {
console.log('yes');
one = 0
}
}
<button onclick ='click1()'> </button>
Change your code like this:
<html>
<body>
<button onclick="click1()">Click</button>
</body>
<script>
var one = 0;
const click1 = () => { if (++one === 3) document.write('yes') };
</script>
</html>
Looks like you're missing the brackets on the function call on your button. Try: onclick='click1()'
You could use an approach like below. See the code comments for details:
// Reference to the DOM elements
const countEl = document.querySelector('#count-el');
const buttonEl = document.querySelector('button');
// Init a counter variable and return a function that increments it
const increment = (() => {
let i = 1;
return () => i++;
})();
// The click event listener
buttonEl.addEventListener('click', () => {
// Increment the count and update the UI based on if current click count is 3
if (increment() === 3) {
countEl.textContent = 'yes';
}
});
<span id="count-el"></span>
<br />
<button>Click 3 times</button>
Im just a beginner learning Javascript, and i have a problem.
I want to compare value's of 2 different functions. When value "kliks" is higher than value "clicks" , then alert: (...) I know what the problem is, but i dont know how to fix it.
My function code is the following:
var kliks = 0;
var clicks = 0;
function clickMe() {
kliks++;
document.getElementById("kliks").innerHTML = kliks;
}
function onClick() {
clicks++;
document.getElementById("clicks").innerHTML = clicks;
return clicks;
}
if (kliks > clicks) {
alert("Something")
}
Because the value's are in the function, the var always give 0 in the IF statement.
I tried to get both functions in 1 function, i tried to post the if statement in the functions, but i dont know how to fix it.
Hope you guys can help me!
Sorry for my horrible english btw ;)
Change the code as follows:
var kliks = 0;
var clicks = 0;
function clickMe() {
kliks++;
document.getElementById("kliks").innerHTML = kliks;
check();
}
function onClick() {
clicks++;
document.getElementById("clicks").innerHTML = clicks;
check();
}
function check() {
if (kliks > clicks) {
alert("Something")
}
}
Basically, you need to check, after each click, if klicks is greater than clicks. This is done by calling the function check() in each of clickMe and onClick functions.
You can try to encapsulate your condition checking in a function and call that function in each of your other functions:
var kliks = 0;
var clicks = 0;
function onKlik() {
kliks++;
document.getElementById("kliks").innerHTML = kliks;
checkClicks();
}
function onClick() {
clicks++;
document.getElementById("clicks").innerHTML = clicks;
checkClicks();
}
function checkClicks() {
if (kliks > clicks) {
alert("Something");
}
}
<div id="kliks" onclick="onKlik();">kliks</div>
<div id="clicks" onclick="onClick();">clicks</div>
var kliks = 0;
var clicks = 0;
function clickMe() {
kliks++;
document.getElementById("kliks").innerHTML = kliks;
compare(kliks,clicks);
}
function onClick() {
clicks++;
document.getElementById("clicks").innerHTML = clicks;
compare(kliks,clicks);
}
var compare = function(kliks,clicks){
if(kliks > clicks){
alert('something')
}
}
<div id="kliks" onclick="clickMe();">kliks</div>
<div id="clicks" onclick="onClick();">clicks</div>
OK so I am making a reaction tester, and I have a function that makes shapes appear on screen, So what I want is some sort of function were after 5 clicks on a certain element it will end a function. Is there a way of doing that? sorry if its a dumb question, its because I am new to the whole coding...
Here you go
var clickHandler = (function (e) {
var count = 0;
return function () {
count += 1;
if (count > 5) {
return;
}
// do other stuff here
}
}());
aDiv.addEventListener('click', clickHandler, false);
You Can use static variable to count how many times the object has been clicked.
and here is how you can create static variable in javascript.
You can unbind the click event once the counter reaches 5. See the example below
function test(sender) {
sender.dataset.clicked++;
console.log("I've been clicked", sender.dataset.clicked);
if (+sender.dataset.clicked === 5) {
// unbind the event
sender.onclick = null;
}
return;
}
<div onclick="test(this);" data-clicked="0">click me</div>
You may use global variable which may remain counting on click function
<script>
var globalvar = 0;
onclickfunct()
{
globalvar += 1;
if(globalvar == 5)
{
//do my work
}
else
{
//give alert
}
}
</script>
I'm sure this is a super easy fix and I just can't see it..
I have a play button and I only want it to write to database (inc playcount) only when it's clicked the first time.
Any idea why this doesn't work? This result counts every click, and if I do if countonce = 0 and declare at beginning as 0 it won't count any clicks. Am I misunderstanding javascript?
<div id="left-05-play_">
<script type="text/javascript">
var currsong = 1;
var playcountadd = document.getElementById('left-05-play_');
playcountadd.onclick = function() {
if (countonce != 1) {
$.post( "php/songadd.php", { addsong: "1", } );
var countonce = 1;
} }
</script>
</div>
Thank-you for taking the time to read this question.
This should do the trick.
var currsong = 1;
var songadded = false;
var playcountadd = document.getElementById('left-05-play_');
playcountadd.onclick = function() {
if (!songadded) {
$.post( "php/songadd.php", { addsong: "1", } );
songadded = true;
}
}
Changed countonce to songadded
Moved songadded out of onclick function
Changed songadded to boolean logic
Check whether songadded=false before proceeding with AJAX post
hey, how can I have my download link hidden, and make a count down type thing. Maybe have it count down from 10 and once it's done that have the download link appear, it would be best to do it in js right?
does anyone know how to do this? :D
Thanks
Complete example:
<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 10;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>
You can use setInterval for this. setInterval behaves like a timer, where you can run a certain function periodically. Something like this should do the work(untested):
$(".link").hide();
var iteration = 0;
var timer = setInterval(function() {
if(iteration++ >= 10) {
clearTimeout(timer);
$(".link").show();
$(".counter").hide();
}
$(".counter").text(10 - iteration);
}, 1000);
This will initially hide the download link and run a function every second which counts down from 10. When we reaced ten, we hide the counter and show the link. ClearTimeout is used so that we don't count after we reached ten. Easy as dell.
Edit: As mentioned in the comments, this function is using jQuery to find the elements.
Take a look at the setTimeout function. You can do something like:
function displayLink() {
document.getElementById('link_id').style.display = 'block';
}
setTimeout(displayLink, 10000);
var WAIT_FOR_SECONDS = 10;
var DOWNLOAD_BUTTON_ID = "btnDownload";
if (document.body.addEventListener) {
document.body.addEventListener("load", displayDownloadButton, false);
} else {
document.body.onload = displayDownloadButton;
}
function displayDownloadButton(event) {
setTimeout(function() {
_e(DOWNLOAD_BUTTON_ID).style.display = "";
}, WAIT_FOR_SECONDS*1000);
}
function _e(id) {
return document.getElementById(id);
}