Develop Reference

For-loop not working till the specified input

The loop in myFunctionlp, is not working to the specified user input through prompt which is round in this case. I want that loop to run until the input of the user which I am getting through prompt. myFunctionlp is being called by a button press.
var round = prompt("Enter number of rounds");
var defaultNumberOfRounds = 1;
var roundno = isNaN(Number(round)) ? defaultNumberOfRounds : round;
var images_arr = ["../img/paper.png", "../img/stone.png",
"../img/sisor.png"
];
var size = images_arr.length;
console.log(`round: ${round}, roundno: ${roundno}`);
function myFunctionlp() {
for (var i = 0; i < roundno; i++) { //this loop
console.log(i);
setInterval(function() {
var x = Math.floor(size * Math.random())
$('#random').attr('src', images_arr[x]); // JQuery
}, 1500);
setInterval(function() {
var sound = new Audio("../audio/audio.mp3");
sound.play();
if (s == 50) {
sound.pause();
} else {
alert("Hello");
}
}, 3000);
}
}
function stop() {
for (s = 0; s < 51; s++) {
console.log(s);
}
}
function extra() {
var music = new Audio("../audio/audio_3.mp3");
music.play();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="onClick" onclick="myFunctionlp()">Play</button>

How do I get my timer to stop, when my 10th and last question has been answered?

The goal I am trying to achieve is to get my timer to stop when all the questions of my quiz has been answered. I have 10 total questions. I have been able to get the timer to start. But getting ot to stop on the click of submit on the 10th question is something I can't figure out.
Let me know if you know what I am doing
StackOverflow said my code was too long... I added my code to codepen. I also included my JS on here.
// variables
var score = 0; //set score to 0
var total = 10; //total nmumber of questions
var point = 1; //points per correct answer
var highest = total * point;
//init
console.log('script js loaded')
function init() {
//set correct answers
sessionStorage.setItem('a1', "b");
sessionStorage.setItem('a2', "a");
sessionStorage.setItem('a3', "c");
sessionStorage.setItem('a4', "d");
sessionStorage.setItem('a5', "b");
sessionStorage.setItem('a6', "d");
sessionStorage.setItem('a7', "b");
sessionStorage.setItem('a8', "b");
sessionStorage.setItem('a9', "d");
sessionStorage.setItem('a10', "d");
}
// timer
// var i = 1;
// $("#startButton").click(function (e) {
// setInterval(function () {
// $("#stopWatch").html(i);
// i++;
// }, 1000);
// });
// $("#resetButton").click(function (e) {
// i = 0;
// });
//hide all questions to start
$(document).ready(function() {
$('.questionForm').hide();
//show question 1
$('#question1').show();
$('.questionForm #submit').click(function() {
//get data attribute
current = $(this).parents('form:first').data('question');
next = $(this).parents('form:first').data('question') + 1;
//hide all questions
$('.questionForm').hide();
//show next question in a cool way
$('#question' + next + '').fadeIn(400);
process('' + current + '');
return false;
});
});
//process answer function
function process(n) {
// get input value
var submitted = $('input[name=question' + n + ']:checked').val();
if (submitted == sessionStorage.getItem('a' + n + '')) {
score++;
}
if (n == total) {
$('#results').html('<h3>Your score is: ' + score + ' out of ' + highest + '!</h3> <button onclick="myScore()">Add Your Name To Scoreboard!</a>')
}
return false;
}
window.yourPoints = function() {
return n;
}
function myScore() {
var person = prompt("Please enter your name", "My First Name");
if (person != null) {
document.getElementById("myScore").innerHTML =
person + " " + score
}
}
// function showTime() {
// var d = new Date();
// document.getElementById("clock").innerHTML = d.toLocaleTimeString();
// }
// setInterval(showTime, 1000);
var x;
var startstop = 0;
window.onload = function startStop() { /* Toggle StartStop */
startstop = startstop + 1;
if (startstop === 1) {
start();
document.getElementById("start").innerHTML = "Stop";
} else if (startstop === 2) {
document.getElementById("start").innerHTML = "Start";
startstop = 0;
stop();
}
}
function start() {
x = setInterval(timer, 10);
} /* Start */
function stop() {
clearInterval(x);
} /* Stop */
var milisec = 0;
var sec = 0; /* holds incrementing value */
var min = 0;
var hour = 0;
/* Contains and outputs returned value of function checkTime */
var miliSecOut = 0;
var secOut = 0;
var minOut = 0;
var hourOut = 0;
/* Output variable End */
function timer() {
/* Main Timer */
miliSecOut = checkTime(milisec);
secOut = checkTime(sec);
minOut = checkTime(min);
hourOut = checkTime(hour);
milisec = ++milisec;
if (milisec === 100) {
milisec = 0;
sec = ++sec;
}
if (sec == 60) {
min = ++min;
sec = 0;
}
if (min == 60) {
min = 0;
hour = ++hour;
}
document.getElementById("milisec").innerHTML = miliSecOut;
document.getElementById("sec").innerHTML = secOut;
document.getElementById("min").innerHTML = minOut;
document.getElementById("hour").innerHTML = hourOut;
}
/* Adds 0 when value is <10 */
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function reset() {
/*Reset*/
milisec = 0;
sec = 0;
min = 0
hour = 0;
document.getElementById("milisec").innerHTML = "00";
document.getElementById("sec").innerHTML = "00";
document.getElementById("min").innerHTML = "00";
document.getElementById("hour").innerHTML = "00";
}
//adding an event listener
window.addEventListener('load', init, false);
https://codepen.io/rob-connolly/pen/xyJgwx
Any help would be appreciated.

its a pretty simple solution just call the stop function in the if condition of n == total
if (n == total) {
$('#results').html('<h3>Your score is: ' + score + ' out of ' + highest + '!</h3>
<button onclick="myScore()">Add Your Name To Scoreboard!</a>')
stop()
}
https://codepen.io/nony14/pen/VwYREgr

Try using clearInterval() to stop the timer.
https://codepen.io/thingevery/pen/dyPrgwz

Expected end of value but found ‘0.1’. Error in parsing value for ‘opacity’. Declaration dropped

I am running into a strange error (in the title of the question) when attempting to change an element's opacity property over time using a setTimeout() function. The funny thing about this is that I have successfully completed this goal before with no errors here: (http://www.public.asu.edu/~drwarner/imageslider/fading_Banner.html), but I am still having trouble getting this to work here: (http://www.public.asu.edu/~drwarner/imageslider/scrolling_Banner.html). I am really out of ideas as to what is making this occur, so here is my code that is failing:
<script>
var images = [];
var imagePosition = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var cycle;
var hoverImagePosition;
var container;
var c;
window.onload = function scrolling() {
for (i = 0; i < 10; i++) {
images.push(document.getElementById("scrollingImage" + i));
if (document.addEventListener) {
// For all major browsers, except IE 8 and earlier
document.getElementById("scrollingImage" + i).addEventListener("mouseenter", imageBigger);
document.getElementById("scrollingImage" + i).addEventListener("mouseleave", imageSmaller);
} else if (document.attachEvent) {
// For IE 8 and earlier versions
document.getElementById("scrollingImage" + i).attachEvent("mouseenter", imageBigger);
document.getElementById("scrollingImage" + i).attachEvent("mouseleave", imageSmaller);
}
}
container = document.getElementById("container");
container.style.opacity = 0;
imageAppear();
scrollImages = setInterval(frame, 100);
};
function imageAppear(){
setTimeout(function(){
if(container.style.opacity < 1){
container.style.opacity = container.style.opacity + .1;
imageAppear();
}
}, 10);
}
function frame() {
for (x = 0; x < 10; x++) {
if (imagePosition[x] == 100) {
imagePosition[x] = 0;
} else {
imagePosition[x] = imagePosition[x] + 1;
images[x].style.left = imagePosition[x] + '%';
}
}
}
function imageBigger() {
this.style.msTransform = "scale(1.1,1.1)";
this.style.webkitTransform = "scale(1.1,1.1)";
this.style.transform = "scale(1.1,1.1)";
this.style.zIndex = 1;
clearInterval(scrollImages);
}
function imageSmaller() {
this.style.zIndex = 0;
this.style.msTransform = "scale(1,1)";
this.style.webkitTransform = "scale(1,1)";
this.style.transform = "scale(1,1)";
scrollImages = setInterval(frame, 100);
}
</script>
And here is my code that is somehow working yet seems so similar:
<script type="text/javascript">
var n = 0;
var imageArray = [];
window.onload = beginScroll;
function beginScroll() {
for (z = 0; z < 10; z++) {
imageArray.push(document.getElementById("image" + z));
}
imageFade();
}
function imageFade() {
for (x = 0; x < 10; x++) {
imageArray[x].style.zIndex = 1;
imageArray[x].style.opacity = 1;
imageArray[x].style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";
imageArray[x].style.filter.alpha = 1;
imageArray[x].style.MozOpacity = 1;
imageArray[x].style.KhtmlOpacity = 1;
}
n = 0;
frame();
}
function frame() {
setTimeout(function() {
if (n < 10) {
if (imageArray[n].style.opacity == 0) {
imageArray[n].style.zIndex = 0;
n++;
frame();
} else {
imageArray[n].style.opacity = imageArray[n].style.opacity - 0.01;
imageArray[n].style.MsFilter = imageArray[n].style.MsFilter - 0.01;
imageArray[n].style.filter.alpha = imageArray[n].style.filter.alpha - 0.01;
imageArray[n].style.MozOpacity = imageArray[n].style.MozOpacity - 0.01;
imageArray[n].style.KhtmlOpacity = imageArray[n].style.KhtmlOpacity - 0.01;
frame();
}
} else {
imageFade();
}
}, 10);
}
</script>

I want to set interval between clicks with this code

I want to set interval between clicks with this code. This is the script :
var inputs = document.getElementsByClassName('class-name');
for(var i=0; i<inputs.length;i++) {
inputs[i].click();
}

You can either set a bunch of time outs
var inputs = document.getElementsByClassName('class-name');
for (var i = 0; i < inputs.length; i++) {
(function(i){
setTimeout(function () {
inputs[i].click();
}, 1000 * i);
})(i);
}
or you can just use an interval
(function() {
var inputs = document.getElementsByClassName('class-name'),
current = 0,
timer = window.setInterval(
function () {
var input = inputs[current];
if (input) {
input.click();
current++;
} else {
window.clearInterval(timer);
}
}
,1000);
}());

Try this:
var inputs = document.getElementsByClassName('class-name');
for (var i = 0; i < inputs.length; i++) {
(function(i){
// to get the actual value of i
setInterval(function () {
inputs[i].click();
}, 1000);
})(i);
}

mouseover timeout too fast

I'm using javascript to set my mouseover at the left nav. But the problem is, the timeout is faster than it should be. How do I make it longer on mouseover?
stuHover = function () {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++) {
for (var x = 0; x < document.styleSheets[i].rules.length; x++) {
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1) {
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector, cssRule.style.cssText);
}
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i = 0; i < getElm.length; i++) {
getElm[i].onmouseover = function () {
this.className += " iehover";
}
getElm[i].onmouseout = function () {
this.className = this.className.replace(new RegExp("iehover\\\b"), "")
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

You want something like this:
getElm[i].onmouseout = function() {
var t = this;
setTimeout(function() {
t.className = t.className.replace(" iehover","");
},5000); // 5 seconds
};
Although really, if I had to wait 5 seconds for something to disappear if I accidentally moved over the trigger area, I'd be annoyed. Try 250 instead (0.25 seconds).