I am very new to web development so I'm sorry if I sound stupid.
I am trying to make variable change after a certain amount of time with HTML 5/JavaScript.
This is the code i was using
var myVar = setInterval(OnScreenVariables, 100);
var myVar = setInterval(Interval, 1000);
function Interval() {
if (x == 1) {
i++;
if (i > 3) {
var i = 1;
var x = 0;
}
}
}
function OnScreenVariables() {
document.getElementById("i").innerHTML = i;
document.getElementById("x").innerHTML = x;
}
<p id="x">hi</p>
<p id="i">hi</p>
<div style="backgound-color:blue;" onclick="x=1;">press me</div>
But it is not working. Could you tell me why it's not working and if there is a better way to do this.
Several problems.
https://www.w3schools.com/js/js_hoisting.asp
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
var i and var x are being hoisted, so this:
function Interval() {
if (x == 1) {
i++;
if (i > 3) {
var i = 1;
var x = 0;
}
}
}
behaves like
function Interval() {
var i;
var x; // x is always undefined
if (x == 1) {
i++; // undefined++ = NaN
if (i > 3) {
i = 1;
x = 0;
}
}
}
And after fixing that, i and x are not declared when the script is run, so they are instead using the DOM elements with id i and x. DOMElement++ = NaN, and DOMElement.toString() is equal to a string representing the DOM element's internal name.
I would recommend using let and const (which have better scoping and less chances for unexpected behavior, and can be scoped inside for loop closures for example) instead of var, and getting in the habit of making sure you use var, let, const and plan to keep your variables deliberately scoped and declared wherever you use them.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p id="x">hi</p>
<p id="i">hi</p>
<div style="backgound-color:blue;" onclick="x=1;">press me</div>
<script>
var myVar = setInterval(OnScreenVariables, 100);
var myVar = setInterval(Interval, 1000);
var i = 1, x = 0;
function Interval() {
console.log(i,x)
if (x == 1) {
i++;
if (i > 3) {
i = 1;
x = 0;
}
}
}
function OnScreenVariables() {
document.getElementById("i").innerHTML = i;
document.getElementById("x").innerHTML = x;
}
</script>
</body>
</html>
Related
I have a question about changing variables.
I'm making a scoreboard for table tennis. I'm trying to show the players who has to serve. Everytime the x-key gets pressed (/when a point is scored), I check if the right to serve has to change. For this example I removed that bit.
What I'm trying to do:
Everytime an input is detected (keyboard event), the opacity of the first variable is changed to be the opposite from what is was, as well as the second variable.
Perhaps, you could think of it like a railroad crossing.
What is happening:
Only the opacity of the first variable is 1. This is due to the code running from top to bottom. It sees that the currentActionPlayer1 variable is 0, so it makes it 1. But when it reaches the if statement 'currentActionPlayer2 == 0', that is true. So the currentActionPlayer1 variable becomes 0, and cAP2 becomes 1 again.
I don't really know how to explain it any better.
var currentActionPlayer1 = 1;
var currentActionPlayer2 = 0;
window.addEventListener("keyup", checkKeyUp);
function checkKeyUp(keyUp) {
if (keyUp.keyCode == "88") { //X
changeActionPlayer();
}
}
function changeActionPlayer() {
if (currentActionPlayer1 == 1) {
currentActionPlayer1 = 0;
currentActionPlayer2 = 1;
changeActionIcon();
}
if (currentActionPlayer2 == 1) {
currentActionPlayer1 = 0;
currentActionPlayer1 = 1;
changeActionIcon();
}
}
function changeActionIcon() {
if (currentActionPlayer1 == 1) {
document.getElementById('actionP1').style.opacity = "1";
document.getElementById('actionP2').style.opacity = "0.2";
}
if (currentActionPlayer2 == 1) {
document.getElementById('actionP1').style.opacity = "0.2";
document.getElementById('actionP2').style.opacity = "1";
}
}
<html>
<head>
</head>
<body>
<p id='actionP1' style='opacity: 0.2'>action</p>
<p id='actionP2' style='opacity: 0.2'>action</p>
</body>
</html>
If I right understand, you need something like this one?
var currentActionPlayer1 = 1;
var currentActionPlayer2 = 0;
window.addEventListener("keyup", checkKeyUp);
function checkKeyUp(keyUp) {
if (keyUp.code == "KeyX") { //X
changeActionPlayer();
}
}
function changeActionPlayer() {
if (currentActionPlayer1 == 1) {
currentActionPlayer1 = 0;
currentActionPlayer2 = 1;
changeActionIcon();
} else if (currentActionPlayer2 == 1) {
currentActionPlayer2 = 0;
currentActionPlayer1 = 1;
changeActionIcon();
}
}
function changeActionIcon() {
if (currentActionPlayer1 == 1) {
document.getElementById('actionP1').style.opacity = "1";
document.getElementById('actionP2').style.opacity = "0.2";
}
if (currentActionPlayer2 == 1) {
document.getElementById('actionP1').style.opacity = "0.2";
document.getElementById('actionP2').style.opacity = "1";
}
}
<html>
<head>
</head>
<body>
<p id='actionP1' style='opacity: 0.2'>action</p>
<p id='actionP2' style='opacity: 0.2'>action</p>
</body>
</html>
I have 2 pieces of code, one jQuery which checks the value of an input field and then takes this value a manipulates the CSS relatively. I have some vanilla Javascript and I was looking to use my jQuery to manipulate the JS as the jQuery is outside code block. How would I able to use the variables inside the jQuery in my vanilla Javascript?
$(document).ready(function() {
$('input').change(function() {
var val = $(this).val();
var inputNo = (10 / val);
if (val > 0) {
$(".orb").addClass("rotating");
$('.rotating').css("animation", "rotating " + inputNo + "s linear infinite");
} else {
$(".orb").removeClass("rotating");
}
console.log(inputNo);
});
});
function init() {
ctx.shadowColor = "#57e0c1";
ctx.shadowBlur = inputNo;
for (var i = 0; i <= totalTentacles - 1; i++) {
lines[lines.length] = new Line();
}
animate();
}
init();
The variable is scoped within the $('input').change function. This essentially means it disappears when the function ends. If you want it to be accessible to multiple function, you need to initialize it outside the function.
Eg.
var inputNo = 0; // declared outside function block
$(document).ready(function() {
$('input').change(function(){
var val = $(this).val();
inputNo = (10 / val);
if (val > 0) {
$(".orb").addClass("rotating");
$('.rotating').css("animation","rotating "+ inputNo +"s linear infinite");
}
else {
$(".orb").removeClass("rotating");
}
console.log(inputNo);
});
});
function init() {
ctx.shadowColor = "#57e0c1";
ctx.shadowBlur = inputNo;
for (var i = 0; i <= totalTentacles - 1; i++) {
lines[lines.length] = new Line();
}
animate();
}
init();
Note, there are deeper issues in your code however than simple variable scoping. For example, your init function will need to be called again within the change function if you want to update the shadow-blur on change as well.. so replace console.log(inputNo); with another init(); call.
Javascript
function myFunction() {
for (i = 0; i < 5000;) {
setTimeout(function() {
document.getElementById("demo").innerHTML = i;
}, i);
i += 500;
}
}
HTML
<body onload="myFunction()">
<div id="demo"></div>
How to increase " i " every 5ms and print it in #demo every time it changes
I am trying to make a look that increases the value of ( i ) once every 5ms, and prints it out in # demo.
Right now, the value 5000 immediately prints out as soon as I run the script for some reason, as opposed to increasing by 500 every time.
Thanks in advance.
You can change myFunction to:
var i = 0;
function myFunction() {
var timerId = setInterval(function(){
if(i >= 5000)
{
clearInterval(timerId);
}
document.getElementById("demo").innerHTML = i;
i +=500;
}, 5);
}
this should work.
var i=0;
function looper(){
setTimeout(function(){
console.log(i+" data");
i=i+500;
if(i<5000)
looper();
}, i);
}
looper();
function myFunction() {
var i = 0;
var max = 5000;
var step = 500;
var intervalMs = 5;
var interval = setInterval(function() {
// clear interval if one step before max value
if (i >= max-step) {
clearInterval(interval);
}
// increment i by step
i+=step;
// set inner html of div
document.getElementById("demo").innerHTML = i;
}, intervalMs)
}
Plunkr: https://plnkr.co/edit/IfkGOpjUnf4sKpN4iCZ4?p=preview
If you want your code to look similar to what you have, you can use an IIFE:
function myFunction() {
for (i = 0; i <= 5000;i += 500) {
(function(index) {
setTimeout(function() {
document.getElementById("demo").innerHTML = index;
}, index);
})(i);
}
}
<body onload="myFunction()">
<div id="demo"></div>
</body>
You are having an issue with the closure not saving a reference to your timeout. Subsequent arguments after the second are passed into the callback function as arguments.
Here we are passing i as the third argument
setTimeout(fn, delay, i)
Then in the callaback we have access to the i, we are reassigning it to x within the scope of the callback.
function myFunction() {
for (i = 0; i <= 5000; i = i + 500) {
setTimeout(function(x) {
document.getElementById("demo").innerHTML = x;
}, i, i);
}
}
myFunction()
<div id="demo"></div>
function myFunction(max, ii = 0) {
document.getElementById('demo').innerHTML = ii
if (ii < max) {
setTimeout(myFunction, 500, max, ii + 500)
}
}
myFunction(5000)
<div id="demo"></div>
**
<div id="demo"></div>
<script>
function myFunction() {
var i = 0;
var setClock = function() {
if (i < 5000) {
local = i;
i += 500;
setTimeout(function() {document.getElementById("demo").innerHTML = local; setTimeout(setClock, 500);},
500);
}
}
setClock();
}
**
you should wrap scripts in tags
the javascript Closures. You should know that because of the Closures, second parameters for all setTimeout() are 5000, which is the i's final value. You can avoid the Closure by the codes I showed or erase the impact of Closure by below codes:
<div id="demo"></div>
<script>
function myFunction() {
var local;
for (i = 0; i < 5000; i+= 500) {
local = i;
setTimeout((function(interval){
return function() {document.getElementById("demo").innerHTML = interval;} ;
})(local), (function(interval){return interval})(local));
}
}
I have a code which I am trying to execute using a parameter in the function, i.e -
function startFadeEffect(elem){ };
I have made the elem equal to a variable b in the global scope, where b is an array of images. Meaning -
var elem = b[imgNumb];
imgNumb is a variable which is globally "0" and inside a function is defined as
imgNumb = imgNumb + count;
Now, my current code "without" the parameter works perfect -
function startFadeEffect(){
var opacSetting = noOpac / 10;
b[imgNumb].style.opacity = opacSetting;
b[imgNumb].style.display = "block";
noOpac++;
if(noOpac < 0){
opacSetting = 0;
}
if(opacSetting == 1){
clearTimeout(timer);
b[imgNumb].style.opacity = 1;
noOpac = 0;
return false;
}
var timer = setTimeout(startFadeEffect, 75);
}
However, when I use the parameter like this it does not work for me :(
function startFadeEffect(elem){
var opacSetting = noOpac / 10;
elem.style.opacity = opacSetting;
elem.style.display = "block";
noOpac++;
if(noOpac < 0){
opacSetting = 0;
}
if(opacSetting == 1){
clearTimeout(timer);
elem.style.opacity = 1;
noOpac = 0;
return false;
}
var timer = setTimeout(startFadeEffect(elem), 75);
}
Please note I have already defined the elem variable in the global scope of the file. Also, I am only looking for a JS solution no library like JQuery! Thanks
This part is incorrect:
setTimeout(startFadeEffect(elem), 75);
It should be:
setTimeout(function () {
startFadeEffect(elem);
}, 75);
setTimeout expects a function as it's first argument. startFadeEffect(elem) is executed immediately (and doesn't return a function). So what happens is that startFadeEffect calls itself recursively until opacSetting == 1 which breaks the recursion.
I feel like this is a pretty basic thing, but I cant seem to find the solution. Im trying to increment a value after the loading of an IFRAME.
the code looks like this:
var x=0;
$(document).ready(function() {
$('#iframe-2').load(function() {
var x=x+1;
});
$('#iframe-3').load(function() {
var x=x+1;
});
$('#iframe-4').load(function() {
var x=x+1;
});
$('#iframe-5').load(function() {
var x=x+1;
});
});
What I want to do is give a number of loaded iframes that updates when an iframe completes its loading. The output code is like this currently:
<script language="javascript">
document.write(x + " Results");
</script>
thanks a ton in advance for any help!
You should change
var x = x+1;
to
x = x+1
Because the var keyword is creating a new variable every time in your every load so global variable x is not getting updated/incremented.
You declare local variable in the load callback function, so it will not increase the global x, you could declare var x inside of dom ready callback function, and use it in load callback function.
$(document).ready(function() {
var x = 0;
$('#iframe-2').load(function() {
x++;
});
$('#iframe-3').load(function() {
x++;
});
$('#iframe-4').load(function() {
x++;
});
$('#iframe-5').load(function() {
x++;
});
});
Edit:
After this, document.write(x + " Results"); still won't work, because it executes before the iframe has been loaded. You need to do a check asynchronously.
Here is the live demo.
$(document).ready(function() {
var x = 0;
$('iframe').load(function() {
x++;
});
var time_id = setInterval(function() {
$('#count').text(x);
if (x === $('iframe').length) {
clearInterval(time_id);
}
}, 200);
});
The html:
<iframe src="http://www.w3schools.com"></iframe>
<iframe src="http://www.w3schools.com"></iframe>
<iframe src="http://www.w3schools.com"></iframe>
<iframe src="http://www.w3schools.com"></iframe>
<hr>
Loaded iframe count: <span id="count">0<span>
I finally came up with a very simple solution:
var x=0;
$(document).ready(function() {
$('#iframe-2').load(function() {
$("#t2").css("display","inline");
x++;
document.getElementById("tabs-1").innerHTML=x + " Results";
});
$('#iframe-3').load(function() {
$("#t3").css("display","inline");
x++;
document.getElementById("tabs-1").innerHTML=x + " Results";
});
$('#iframe-4').load(function() {
$("#t4").css("display","inline");
x++;
document.getElementById("tabs-1").innerHTML=x + " Results";
});
$('#iframe-5').load(function() {
$("#t5").css("display","inline");
x++;
document.getElementById("tabs-1").innerHTML=x + " Results";
});
});
Javascript has "function scope" - variables exist only within the function they were created in. So it is possible to have several different variables named x, if and only if they are in different functions (which is the case here).
Variables are created with the var keyword and accessed without a keyword. So, var x = 10; creates a variable named x, and x = 10; modifies an existing variable named x.
In your code every function calls var x = 10;. Since the previously defined x was defined in an outer function, that line is valid and created a new variable named x, scoped to the function it is being called in. If you were to omit the var statement, the interpreter would first look at the current function's namespace and not find x. Then it would move up to the global scope and find the x that you already declared, and use that.
In short, omit the word var in every line except line 1:
var x = 0;
$(document).ready(function () {
$('#iframe-2').load(function () {
x = x + 1;
});
$('#iframe-3').load(function () {
x = x + 1;
});
$('#iframe-4').load(function () {
x = x + 1;
});
$('#iframe-5').load(function () {
x = x + 1;
});
});
Another alter solution for above query using jQuery is here...
HTML:
<div id="top"></div>
<iframe src="http://jquery.com/"></iframe>
<iframe src="http://jquery.com/"></iframe>
<iframe src="http://jquery.com/"></iframe>
<iframe src="http://jquery.com/"></iframe>
<div id="bottom"></div>
JQuery:
var x = 0;
$(function() {
$('iframe:eq(0)').load(function() {
x = x + 1;
result(x);
});
$('iframe:eq(1)').load(function() {
x = x + 1;
result(x);
});
$('iframe:eq(2)').load(function() {
x = x + 1;
result(x);
});
$('iframe:eq(3)').load(function() {
x = x + 1;
result(x);
});
});
function result(x) {
if (x == null || typeof(x) == "undefined") x = 0;
$("#top").html("<div>Loaded iframe count: " + x + "</div><hr/>");
$("#bottom").html("<hr/><div>Loaded iframe count: " + x + "</div>");
}
Try on codebins too http://codebins.com/codes/home/4ldqpbk