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>
Related
Overview: There is a Button on my webage, its a single button. When I click this button, it should call function X. If I click this button a second time, it should call function Y. Basically, this is an ON and OFF switch. this button calls a function via onclick="function X". the same onclick needs to call function Y if clicked again. I hope I made that clear.
It cannot be 2 seperate buttons. thats too easy. does anyone have any ideas ? the only flexibily I have in terms of languages is html, javacript and css. any ideas welcome.
You don't need multiple functions. Just use a boolean to toggle between 2 different parts of code.
var toggle = true;
function functionX(){
if(toggle){
// Logic for the first click
} else {
// Logic for the other click
}
toggle = !toggle; // change the toggle for the next time the button's clicked.
}
There are a few ways to do this:
Two Buttons
html
<button id="a" onclick="a()">Test</button>
<button id="b" onclick="b()" style="hidden">Test</button>
css
.hidden {
display: none;
}
js
function a() {
var buttonA = document.getElementById('a');
var buttonB = document.getElementById('b');
buttonA.classList.add('hidden');
buttonB.classList.remove('hidden');
}
function b() {
var buttonA = document.getElementById('a');
var buttonB = document.getElementById('b');
buttonB.classList.add('hidden');
buttonA.classList.remove('hidden');
}
Hold State in a var
html
<button onclick="x()">Test</button>
js
var clicked = 'b'; //initial state
function x() {
switch(clicked) {
case 'a':
clicked = 'a';
a();
break;
case 'b':
clicked = 'b';
b();
break;
default: throw 'unknown state';
}
}
function a() {
//something
}
function b() {
//something
}
Re-assign listener on click (Easier with jquery)
html
<button id="x">Test</button>
js
$(document).ready(function() {
$('#x').click(a());
});
function a() {
//do something then..
$('#x').click(b);
}
function b() {
//do something then..
$('#x').click(a);
}
try this code
var i = 0;
function fun() {
if (i == 0) {
funX();
i = 1;
} else {
funY();
i = 0;
}
}
function funX() {
console.log('x');
}
function funY() {
console.log('y');
}
<button id="test" onclick="fun()">Click</button>
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
}
}
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
I have two JS functions: a load() function that displays a progress bar and a kill () function that stops the execution of the load once the page is loaded.
Now when another page is loaded the progress bar is not displayed, knowing that the load function is called on every page.
Any hints on where the problem might be and if there is a way to fix it.
Here is my code:
<script type="text/javascript">
var count=0;
function load(i) {
j = parseInt(i);
document.getElementById("progressBar").style.display = "block";
count=count+1;
if (document.all) {
document.all.btn1.value=count+'%';
document.all.progressbar.pic1.width=2*count;
}
else {
document.getElementById("pic1").width=2*count;
document.getElementById("bar").width=count+'%';
}
if (count<100) {
setTimeout('load(j)',j);
}
if(count==100) {
document.getElementById("progressBar").style.display = "none";
count=0;
}
}
function kill(){
if (document.applets[0].isActive()) {
document.getElementById("progressBar").style.visibility = "hidden";
}
}
</script>
Thank you in advance !
In load() you're changing display to block, but in kill() you set visibility to hidden; you should set display to none instead, so it can properly be set to block again next time. Read about visibility.
Optimized code:
<script type="text/javascript">
var count = 0,
win = window,
doc = document,
progressBar = doc.getElementById("progressBar"),
t, j;
function load(i) {
j = parseInt(i);
progressBar.style.display = "block";
count++;
// no actual need to check if doc.all is available
// just select through id
doc.getElementById("pic1").style.width = 2*count;
doc.getElementById("bar").style.width = count+'%';
if (count < 100) {
t = win.setTimeout('load(j)',j);
} else {
progressBar.style.display = "none";
win.clearTimeout(t);
count = 0;
}
}
function kill(){
if (doc.applets[0].isActive()) {
progressBar.style.display = "none";
}
}
</script>
If you assign setTimeout to a variable, you can use clearTimeout on it to stop it.
E.g.
set the timeout with
t = setTimeout('load(j)',j);
then stop it with
clearTimeout(t); Let me know if that helps, and makes sense :)