How to make alert() come after .innerHTML? [duplicate] - javascript

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.

Related

How to increment the end of string using Javascript [duplicate]

This question already has answers here:
Pad a number with leading zeros in JavaScript [duplicate]
(9 answers)
Closed 2 years ago.
So the challenge is to increment a string and the exact rules are as follows:
If the string already ends with a number, the number should be
incremented by 1.
If the string does not end with a number. the number 1 should be appended to the new string.
Examples:
foo -> foo1
foobar23 -> foobar24
foo0042 -> foo0043
foo9 -> foo10
foo099 -> foo100
I've gotten so close with two different attempts. Both check off certain boxes but neither do both.
function incrementString (strng) {
if (/\d/.test(strng) === true) {
var num = +strng.match(/\d+/g)[0] + 1;
return strng.replace(/[1-9]/g,'') + num;
} else {
return strng + "1";
}
}
This returns the string, keeping the zeros ahead of the incremented number. However on a test like "foobar099" I need to return "foobar100" but get "foobar0100".
function incrementString (strng) {
if (/\d/.test(strng) === true) {
var num = +strng.match(/\d+/g)[0] + 1;
return strng.replace(/\d/g,'') + num;
} else {
return strng + "1";
}
}
This is another close attempt that successfully increments tests like "foobar099" -> "foobar100" but abandons the zeros for tests such as "foobar0042" which becomes "foobar43".
Anyone able to solve this?
Is this what you want?
function incrementString(text) {
return text.replace(/(\d*)$/, (_, t) => (+t + 1).toString().padStart(t.length, 0));
}
console.log(incrementString('foo'));
console.log(incrementString('foobar23'));
console.log(incrementString('foo0042'));
console.log(incrementString('foo9'));
console.log(incrementString('foo099'));

How to break an $.each() loop when conditions have been met [duplicate]

This question already has answers here:
How to break out of jQuery each loop?
(7 answers)
Closed 3 years ago.
I have a fairly basic inquiry regarding how to stop an .each() loop after the conditions have been met. I have a notification counter that displays the number of Issues within a given timeframe. It works, but if I were select another option, it will add up the notifications, which is not good. Below is an example of Issues within 24 hours. I also have an option for Issues within one week and 30 days.
For example, if I were to select 24 hours, it will show: 2
If I were then to select One Week, it will 12 (One Week = 10)
I've tried 'return false' at the end of the loop, but no luck.
Let me know if you can help me out. Thank you.
// # of Issues within 24 hours
var newIssues, openIssues, closedIssues;
newIssues = 0;
openIssues = 0;
closedIssues = 0;
$('.newIssueCount').text('-');
$('.openIssueCount').text('-');
$('.closedIssueCount').text('-');
$('ul.timeFrameRange li:nth-child(1)').click( function(e) {
e.preventDefault();
$.each(parsedData, function (index, item) {
if (moment(item.CreatedDate).isAfter(twentyFourHours)) {
newIssues++;
$('.newIssueCount').html(newIssues);
if (item.IsClosed == false) {
openIssues++;
$('.openIssueCount').html(openIssues);
}
else if (item.IsClosed == true) {
closedIssues++;
$('.closedIssueCount').html(closedIssues);
}
else if (newIssues == 0 || openIssues == 0 || closedIssues == 0) {
$('.newIssueCount').html('0');
$('.openIssueCount').html('0');
$('.closedIssueCount').html('0');
}
}
return false;
});
});
Please try to return false from an anonymous function:
if (your_condition) return false;

How do I use a JS variable in document.getElementById().style? [duplicate]

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 + ")";

¿How can I stop my number sequence from growing? [duplicate]

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);

Anonymous function in setInterval function javascript [duplicate]

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.

Categories