I have a button that takes 2 functions onclick. Here is my button:
<button id="btnNext" onclick="increment(); Next();">Next</button>
The increment() function works as intended on the first click but the Next() function does not. It does work as intended after first click. If I remove the increment() function, the Next() function works on first click. I have tried combining the functions but it gives me the same result.
The Next() function moves to the next form and the increment() function moves the scrollbar slider to the desired position.
Here are my functions:
var Next = function () {
UserVM.Model.MoveCurrentToNext();
}
var increment = function () {
if (lastScroll < 240) {
lastScroll += 40;
}
scrollpos.scrollTop = lastScroll;
}
Does anyone know what the reason is for this?
UPDATE: I added an alert to the Next() function. Now when I trigger the button it shows the next form when the alert box pops up but when I click ok, it returns to the previous form. This only happens when I click the button for the first time. Any reason for this? Anyway to solve it?
I don't know why are you using two separate functions for a single onclick unit because if you want to do both the operations why don't you call the form redirection code in the same function.
var increment = function ()
{
if (lastScroll < 240)
{
lastScroll += 40;
}
scrollpos.scrollTop = lastScroll;
//form navigation
UserVM.Model.MoveCurrentToNext();
}
HTML
<button id="btnNext" onclick="increment();">Next</button>
You can try this:
var Next = function () {
alert("This is Next Function");
}
var increment = function () {
alert("This is Increment Function");
Next();
}
<button id="btnNext" onclick="increment()">Next</button>
I have a feeling it is a timing issue. Add a slight delay to give the scroll position to change. (Just an educated guess);
var Next = function () {
window.setTimeout(UserVM.Model.MoveCurrentToNext, 100);
}
var increment = function () {
if (lastScroll < 240) {
lastScroll += 40;
}
scrollpos.scrollTop = lastScroll;
}
remove the onclick attr and put this in your code js:
$(document).ready(function(){
$(document).on("click","#btnNext",function(){
Next();
increment();
});
});
All provided answer work but I think this one is closer to what you need (without using other JS libraries neither making the functions to depend on others)
<button id="btnNext" onclick="(function(){increment();setTimeout(next, 100)})()">Next</button>
Note that this solution is wrapping the call of both increment() and newxt() function inside another anonymous function.
I feel dumb. I figured it out, should have figured it out way earlier. I have the variable lastScroll in another function, so I just change it to the variable position - var position = 0;. Now it works. Sorry for wasting everyone's time. I'll leave this question up just in case any of your answers help someone else out.
Related
I'm not able to figure out how this can be accomplished. I'm working on the chrome extension and I have a setInterval method which monitors a button on a page and when its clicked, it runs a function. but the problem is, when I click the button, the function runs multiple times and I clearly understand this is because of the Interval function, but I want the setInterval to run always on this page so that I can monitor if the button is clicked or not. Below is my code
$(function(){
var url=window.location.href;
findAction(url);
}
function findAction(url){
setInterval(()=>{
Acceptbtn = $("[slot=primary-content-area")[4].querySelector("sn-inbox");
if(Acceptbtn !== undefined && Acceptbtn !== null){
Acceptbtn.addEventListener('click', myFunction);
}
function myFunction() {
console.log("clicked");
runAction(url)
};
},1000);
}
Is there any way to tackle this situation or have I made something simple, complicated or Is my approach completely wrong.?
Below is the Div which my extension monitors for the Accept button -
And once the Accept button is clicked, this is what happens
The Interval method keeps checking for this button and once found and I click on it, I want the runAction(url) function to execute. With my current code, the function gets executed but multiple times
Only add an event listener once
Also the selector is incorrect if sn-inbox is a class and [slot=primary-content-area] was missing a ]
Here I delegate - if you delegate to the closest static container (here document, because I do not know the closest container in your case), you can ALWAYS find the button when it is there:
const url = window.location.href;
$(document).on("click", "[slot=primary-content-area]", function() {
if ($(this).index() === 3) { // 0 based - so the 4th slot
const $inbox = $(this).find(".sn-inbox");
if ($inbox.length > 0) {
$inbox.html("running");
runAction(url)
}
}
})
Example code to execute the functions:
https://jsfiddle.net/mplungjan/p93cj0Le/
$(function() {
const runAction = url => console.log("running", url);
const url = window.location.href;
$(document).on("click", "[slot=primary-content-area]", function() {
if ($(this).index() === 3) { // 0 based
const $inbox = $(this).find(".sn-inbox");
if ($inbox.length > 0) {
$inbox.html("running");
runAction(url)
}
}
})
// testing the code
setInterval(() => {
$("#container").html(`<div>
<div slot="primary-content-area"></div>
<div slot="primary-content-area"></div>
<div slot="primary-content-area"></div>
<div slot="primary-content-area"><button class="sn-inbox">Click</button></div>
</div>`)
}, 5000)
setTimeout(() => $("#container").html(""), 2000)
})
<div id="container">
</div>
I am trying to write a simple game using two.js. I have a function which is called either from button click event and from game loop:
function endGame(gameLoop){
showStartGame();
gameLoop.pause();
$("#gameSquare svg:first").remove();
$("#startGame").show();
}
The line $("#startGame").show() executes correctly only when called from the event, the rest works perfectly fine in both cases.
Click event handler:
$("#abandonGame").click(function(){
endGame(two);
gameLoopPaused = true;
gameStarted = false;
});
The call that doesn't work properly(this.update() is called inside game loop):
this.update = function(){
var computedVector = new Two.Vector(0,0);
screens.forEach(function(screen){
screen.update(speed);
screen.getRectangles().forEach(function(item){
computedVector.x = item.rect.translation.x;
computedVector.y = item.rect.translation.y + screen.getPosition().y;
if(computedVector.distanceTo(new Two.Vector(ship.getX(), ship.getY())) < latura + 20)
endGameEvent();
});
try wrapping it in document.ready
$(document).ready(function() {
$("#startGame").show();
});
You can't call show() on an object before it exists
The problem was with the parent of $("#startGame"), it was hidden as well. It worked with event because by the time I was hitting the $("#abandonGame") button It was displayed on the screen.
I'm writing a script, and there are two boolean statements that are very similar but giving different results, and I don't see why they conflict with one another.
My function looks like this:
SCRIPT:
(function() {
window.onload = function() {
let stopped = true;
let button = document.getElementById("start-stop");
if (stopped) {
setInterval(function() {
console.log("The timer is working.");
}, 1000);
}
button.addEventListener('click', function(){
if (stopped) {
stopped = false;
console.log(stopped);
} else {
stopped = true;
console.log(stopped);
}
});
}
}
}).call(this);
The basic idea is that when I push the button the setInterval function stops, however it keeps on going even when the if/else function switches stopped to false.
For example, my console.log looks like this:
I.e. stopped = false, but setInterval doesn't terminate.
Why is this not evaluating correctly?
The problem with your code is that you are trying to work on a piece of code that has already started to operate. In simpler words, the setInterval method will be called every 1000ms, no matter what the value of stopped variable is. If you wish to really stop the log, you can do any of these:
clearInterval()
to completely remove the interval or
setInterval(function() {
if (stopped) {
console.log("The timer is working.");
}
}, 1000);
to check if the value of stopped variable has changed or not (after the click) and act accordingly. Choose either of these for your purpose..
you are calling setinterval even before button is clicked .As the event is already triggered you cannot stop just by setting the variable to false ,you need to clear the interval using clearinterval
check the following snippet
var intervalId;
window.onload = function() {
let stopped = true;
let button = document.getElementById("start-stop");
var Interval_id;
button.addEventListener('click', function() {
if (stopped) {
Interval_id = callTimeout();
stopped = false;
} else {
clearInterval(Interval_id);
stopped = true;
}
});
}
function callTimeout() {
intervalId = setInterval(function() {
console.log("The timer is working.");
}, 1000);
return intervalId;
}
<input type="button" id="start-stop" value="click it">
Hope it helps
Put the if(stopped) statement inside the setInterval function because if you used this function once it will keep going..
Another way to stop setInterval function is by using clearInterval, like this
var intervalId = setInterval(function() { /* code here */}, 1000)
// And whenever you want to stop it
clearInterval(intervalId);
When you click the button stopped variable becomes false but the setInterval will not stop because the setInterval code is already executed.. it will not execute again on button click. And if you reload the page what will happen is that stopped variable will be again set to true as you have written at first line and setInterval will execute again ..
Now What you can do is store setInterval in a variable like this
var timer = setInterval(function,1000);
and then when you click the button use this method to clear interval
clearInterval(timer);
this should do the trick .. Hope it helps ..
I am trying to have my button doing two things.
init a timer to call a function
call the same function
I have something like the following
test.prototype.setupEvent= function(){
var instance = this;
$('#btn').on('click', function(){
clearInterval(instance.timer);
this.showStuff()
instance.timer=setInterval(function(){
instance.showStuff()
},10000);
})
}
test.prototype.showStuff= function(btnID){
//jump to another page
}
My problem is that I want the user be able to see some contents after 10 second when they first click it, however, if they click the button again before 10 second is up, they can see the contents too. I am not sure how to distinguish the two different states with one click event. Can anyone help me out? Thanks!
Try
test.prototype.setupEvent = function () {
var instance = this;
$('#btn').on('click', function () {
//if there is a timer running then clear the timer, show the content and delete the timer reference
if (instance.timer) {
clearInterval(instance.timer);
instance.showStuff();
delete instance.timer
return;
}
//also you may want to use setTimeout() not setInverval()
instance.timer = setInterval(function () {
instance.showStuff();
delete instance.timer
}, 10000);
})
}
test.prototype.showStuff = function (btnID) {
//jump to another page
}
I'm trying to make a simple flip-card/memory match (like from super mario brothers 3) game in HTML/Javascript and am having a slight issue with the setInterval command.
Here is a link to the full code: http://jsfiddle.net/msfZj/
Here is the main issue/main logic of it:
if(click == 2) //denotes two cards being clicked
{
if(flippedArray[1].src === flippedArray[0].src) // if click 1 == click 2 then refer to function 'delayMatch' which sets click 1 and 2 cards to not be displayed
{
window.setInterval(function() { delayMatch() }, 500);
console.log("EQUAL");
}
else
{
window.setInterval(function() { delayNoMatch() }, 500); // if click 1 != click 2 then display card.png
console.log("NOT EQUAL");
}
function delayMatch() //function for matching pairs
{
flippedArray[0].style = "display:none;";
flippedArray[1].style = "display:none;";
}
function delayNoMatch() //function for non-matching pairs
{
flippedArray[0].src = "card.png";
flippedArray[1].src = "card.png";
}
click = 0; // when clicked two cards set click back to zero
}
The first two cards I click on always work: but from that point onward the setInterval keeps running the function over and over again in an endless loop every 500ms.
I'd be extremely appreciative if anybody can point my in the right direction on how I can do this properly.
Thank you very much for your time.
It looks like you need setTimeout, which only runs once?
window.setTimeout(function() { delayMatch() }, 500);
Otherwise, you need to clear the interval with clearInterval(i), but first set "i" using the return value of setInterval:
var i = window.setInterval(function() { delayMatch() }, 500);
Here's a demo (I JQuerified it a bit for JSFiddle).
You're going to want to go with setTimeout() instead of setInterval()
A handy function when you use setTimeout is clearTimeout. Say you want to set a timer, but maybe want a button to cancel
var timer = setTimeout(fn,1000);
//later maybe
clearTimeout(timer);