This question already has answers here:
setTimeout calls function immediately instead of after delay
(2 answers)
Closed 6 years ago.
I have the following tags in my html documentation:
<p id="demo1">This is my animation text</p>
<button onclick="runAnimation()">RunAnimation</button>
I have declared the following javascript code to make animation for the text in tag:
function changeText(){
var text = document.getElementById("demo1").innerHTML;
text = text.substr(text.length - 1) + text.substr(0, text.length - 1);
document.getElementById("demo1").innerHTML = text;
}
`function` runAnimation(){
setInterval(changeText(), 300);
}
The code above didn't work, instead, when i use anonymous function, everything now OK, can anyone explain me why?
function runAnimation(){
setInterval(function(){
var text = document.getElementById("demo1").innerHTML;
text = text.substr(text.length - 1) + text.substr(0, text.length - 1);
document.getElementById("demo1").innerHTML = text;
}, 300);
}
You need to pass the function itself to setInterval, e.g.:
setInterval(changeText, 300);
Instead, you've coded:
setInterval(changeText(), 300);
This calls changeText and passes the returned value (in this case, undefined) to setInterval.
Related
This question already has answers here:
Javascript alert() supersedes preceding code
(4 answers)
Closed 2 years ago.
I currently have some code like this:
function markAlert() {
if (qnsAnsd == 4) {
alert("You got " + mark + "/4! Refresh page if you want to try again.")
};
}
function addEval() {
var addMrknElem = document.getElementById('q__add-mrkn');
qnsAnsdCntr();
document.getElementById('q__add-btn').disabled = true;
if (document.getElementById('q__add-ans').value == addSoln) {
addMrknElem.innerHTML = "Your answer is correct!";
markCntr();
} else {
addMrknElem.innerHTML = "Your answer is incorrect. The correct answer is " + addSoln + ".";
}
markAlert();
};
Basically title... I want the alert in markAlert() to pop up after the the .innerHTML takes effect.
just wrap your alert() method in the setTimeout See the example below.
setTimeout(() => {
markAlert()
}, 1000);
Here, 1000 means 1 second so this markAlert() will be invoked after 1 second. you can change this value to 500 means half a second too.
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 4 years ago.
If you don't have much time, tell me from where the 'newTime' argument gets its value in the code below.
Look at the code below to understand. I don't understand how the line : requestAnimationFrame(newTime => animate(newTime,time)) works. The argument 'newTime' has never been declared and we don't pass a value to it manually either.
The same problem occurs while i try to understand different array methods, usually an argument is passed and used inside the function but the value of argument is always unknown to me. For example this snippet `array1.map(x => x * 2);. We never pass the 'x' and we never know its value.
Here's the code:
let cat = document.querySelector("img");
let angle = Math.PI / 2;
function animate(time, lastTime) {
if (lastTime != null) {
angle += (time - lastTime) * 0.001;
}
cat.style.top = (Math.sin(angle) * 20) + "px";
cat.style.left = (Math.cos(angle) * 200) + "px";
requestAnimationFrame(newTime => animate(newTime, time));
}
requestAnimationFrame(animate);
What you're seeing is an es6 anonymous function (some languages call these lambda functions) declaration. newTime is just the named parameter to that anonymous function.
requestAnimationFrame(newTime => animate(newTime, time));
is the same as
requestAnimationFrame(function(newTime){
animate(newTime, time);
});
This question already has answers here:
How to interpolate variables in strings in JavaScript, without concatenation?
(17 answers)
Closed 4 years ago.
I want to make it so when ever I reload the page, the background gets chosen randomly.
function switchBG(urlThing) {
document.getElementById("bg-img").style.display="block";
document.getElementById("bg-img").style.backgroundImage="url(urlThing)";
}
var n = Math.floor((Math.random() * 2) + 1);
if (n == 1) {
switchBG('back1.jpg');
}
else if (n == 2) {
switchBG('back2.jpg')
}
I tried that, but nothing happened.
Edit: This is the div. It's the first thing under the tag.
<div id="bg-img"></div>
I am assuming bg-img is the <img> tag.
this is how you can do it
function switchBG(urlThing) {
document.getElementById("bg-img").style.display="block";
var loc = window.location.pathname;
var dir = loc.substring(0, loc.lastIndexOf('/'));
document.getElementById("bg-img").src=dir + urlThing;
}
You need to concatenate the variable like this:
document.getElementById("bg-img").style.backgroundImage="url(" + urlThing + ")";
This question already has answers here:
JS - How to clear interval after using setInterval() [duplicate]
(4 answers)
Closed 6 years ago.
I am trying to make a sequence of numbers that starts with number 10 and grows like 10...11...12...13 etc every two seconds. But lets say that I want it to stop when it reaches 100, how do i do it. So far I have this.Any ideas?
function conteo(num){
setInterval(function(){document.write(num++ + "..."); }, 2000);
}conteo(10)
You can clear the interval:
function conteo(num){
var interval = setInterval(function() {
if(num == 100) {
clearInterval(interval);
}
document.write(num++ + "...");
}, 2000);
}
conteo(10)
This will check if num is equal to 100, then clear interval if true, but keep going.
Save the setInterval reference call into a variable:
var conteoInterval;
function conteo(num){
conteoInterval = setInterval(function(){document.write(num++ + "..."); }, 2000);
}
And to stop the interval, just clear its reference, doing this:
clearInterval(conteoInterval);
This question already has answers here:
Replace method doesn't work
(4 answers)
Closed 8 years ago.
I am writing a jQuery function on the click event of a checkbox list, which stores the value in a string when one item is checked and it removes the string when it is unchecked. I am taking the closed label text and insert and remove it from the string. I can add the strings but I am not able to remove it.
Here is my code:
var currentage = '';
$('#<%=chk_ange.ClientID%> input:checkbox').click(function () {
var str = $(this).next('label').text();
if ($(this).is(':checked')) {
if (currentage.indexOf($(this).next('label').text()) == -1) {
currentage = currentage + str;
}
alert('checked' + currentage);
}
else {
currentage.replace(str, "Hello");
//currentage.replace(str, 'None');
alert('unchecked' + currentage);
}
}
I am storing the values in a global variable so that i can compare the value in each click.
You have to assign the result of replace back to your variable like:
currentage = currentage.replace(str, "Hello");
See: String.prototype.replace() - MDN
You need to equal the result from currentage.replace(str, "Hello"); to currentage. String are immutable so the replace()function returns a new modified string.
currentage = currentage.replace(str, "Hello");