Following is my javascript function, I want to use variable selected outside function, but I am getting selected not defined error in console of inspect element. window.yourGlobalVariable is not solving my problem.
function showMe(pause_btn) {
var selected = [];
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value);
}
}
}
If you really want it to be global, you have two options:
Declare it globally and then leave the var off in the function:
var selected;
function showMe(pause_btn) {
selected = [];
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value);
}
}
}
Assign to a window property
function showMe(pause_btn) {
window.selected = [];
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value); // Don't need `window.` here, could use it for clarity though
}
}
}
A properties of window are global variables (you can access them either with or without window. in front of them).
But, I would avoid making it global. Either have showMe return the information:
function showMe(pause_btn) {
var selected = [];
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value);
}
}
return selected;
}
...and then where you need it:
var selected = showMe();
...or declare it in the scope containing showMe, but not globally. Without context, that looks exactly like #1 above; here's a bit of context:
(function() {
var selected;
function showMe(pause_btn) {
selected = [];
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value);
}
}
return selected;
}
// ...other stuff that needs `selected` goes here...
})();
The outer anonymous function is a "scoping function" which means that selected isn't global, it's just common to anything in that function.
Instead of assigning it to the window object or declaring it outside of the function, I would recommend creating your own object outside of the function, then assigning variables from there. This avoids cluttering the window object and puts all of your global variables in one place, making them easy to keep track of.
For example,
var globalObject {}
function MyFunction {
globalObject.yourVariableName=what your variable is
}
Do this:
var selected;
function showMe(pause_btn) {
selected = [];
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value);
}
}
}
You can actually skip the var selected; line but I prefer declaring my variables.
Dont use this;
selected = [];
it is a bug of javascript
window.selected = [];
inside your function.
You could define the array called selected in the scope that the function called showMe is defined.
In terms of code:
var selected = [];
function showMe(pause_btn) {
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value);
}
}
}
var selected = [];
function showMe(pause_btn) {
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value);
}
}
}
If you declare selected as a property on the window object, you will be able to access it from anywhere else.
function showMe(pause_btn) {
window.selected = [];
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
selected.push(chboxs[i].value);
}
}
}
Related
The following is javascript code, the purpose is simulating jquery nextAll() function. Now the problem is that when I use function as argument, but it cannot see aLists variable in _nextAll() function.
function _nextAll(func) {
var aLists = document.getElementsByTagName("*");
var i = 0;
var temp = [];
while (i < aLists.length) {
if (func) { //if aLists[i].id = "one" replace func, this work
var j = i;
while (j < aLists.length) {
temp.push(aLists[j + 1]);
j++;
}
}
i++;
}
return temp;
}
var temp = _nextAll(function(){
if (aLists[i].id = "one"){ //aLists[i] cannot be seen in anonymous function
return true;
}
});
for (i = 0; i < temp.length; i++) {
temp[i].style.color = "orange";
}
You should pass the selector to _nextAll, have the function select the first element (or every element) matching the selector, then iterate over each element that comes after it:
function _nextAll(sel) {
let el = document.querySelector(sel);
const elements = [];
while (el = el.nextElementSibling) {
elements.push(el);
}
return elements;
}
for (const el of _nextAll('#one')) {
el.style.color = "orange";
}
<div>a</div>
<div>b</div>
<div id="one">c</div>
<div>d</div>
<div>e</div>
you have options to make the two functions see the same variable
1- you can define the variables outside the two functions and you can access the same from the two function
2-pass all the variable you want to share to the function parameters
My code does work but I don't want the jshint errors anymore:
Functions declared within loop referencing an outer scoped variable may lead to confusing semantics
I've tried using let from ES6 to get around the error because I thought that would solve the problem. I configured my gruntfile to use ES6 as well.
I tried using two loops, the outer loop with variable 'i' and the inner loop with variable 'j'
Neither worked.
Full code provided here: https://jsfiddle.net/rwschmitz/zz7ot3uu/
var hobbies = document.getElementsByClassName("hobbies");
var active = false;
// For mouse input
for (var i = 0; i < 5; i++) {
hobbies[i].onmouseover = function() {
hobbies[0].classList.add('hobbies-slide-left');
hobbies[1].classList.add('hobbies-slide-right');
hobbies[2].classList.add('hobbies-slide-left');
hobbies[3].classList.add('hobbies-slide-right');
hobbies[4].classList.add('hobbies-slide-left');
};
}
// For click input
for (var i = 0; i < 5; i++) {
hobbies[i].onclick = function() {
hobbies[0].classList.add('hobbies-slide-left');
hobbies[1].classList.add('hobbies-slide-right');
hobbies[2].classList.add('hobbies-slide-left');
hobbies[3].classList.add('hobbies-slide-right');
hobbies[4].classList.add('hobbies-slide-left');
};
}
You could change your loops to something like this, using Array#forEach():
var hobbies = Array.from(document.getElementsByClassName('hobbies'));
var classes = ['hobbies-slide-left', 'hobbies-slide-right'];
var events = ['mouseover', 'click'];
function addHobbyClass (hobby, index) {
hobby.classList.add(this[index % this.length]);
}
function hobbyEventListener () {
hobbies.forEach(addHobbyClass, classes);
}
hobbies.forEach(function (hobby) {
this.forEach(function (event) {
this.addEventListener(event, hobbyEventListener);
}, hobby);
}, events);
Two additional examples of how to fix the problem.
var hobbies = document.querySelectorAll('.hobbies');
var eventHooks = ['mouseover', 'click'];
hobbies.forEach(function(hobby) {
eventHooks.forEach(function(hook) {
hobby.addEventListener(hook, function() {
hobbies[0].classList.add('hobbies-slide-left');
hobbies[1].classList.add('hobbies-slide-right');
hobbies[2].classList.add('hobbies-slide-left');
hobbies[3].classList.add('hobbies-slide-right');
hobbies[4].classList.add('hobbies-slide-left');
});
});
});
var hobbies = document.getElementsByClassName('hobbies');
var eventHooks = ['mouseover', 'click'];
// Attach events
var attachEvents = function(key) {
eventHooks.forEach(function(hook) {
hobbies[key].addEventListener(hook, function() {
hobbies[0].classList.add('hobbies-slide-left');
hobbies[1].classList.add('hobbies-slide-right');
hobbies[2].classList.add('hobbies-slide-left');
hobbies[3].classList.add('hobbies-slide-right');
hobbies[4].classList.add('hobbies-slide-left');
});
});
};
// Init
var init = function() {
// Loop through hobbies
for (var i = 0; i < hobbies.length; i++) {
attachEvents(i);
}
}
init();
I'm trying to remove click events from a list of id's after adding them with an IIFE like this
function setupPlayer(player){
var squareState = {};
for (i = 0; i < allSquares.length; i++) {
if(allSquares[i].innerHTML === "") {
// set up a click event for each square
document.getElementById(allSquares[i].getAttribute('id')).addEventListener('click', (clickSquare)(i));
}
}
}
The clickSquare function returns
function clickSquare(i){
var num = i;
return function() {
document.getElementById(allSquares[num].getAttribute('id')).innerHTML=player;
}
}
Then I try to remove them with
function removeClickEvents(){
for (let i = 0; i < allSquares.length; i++) {
document.getElementById(allSquares[i].getAttribute('id')).removeEventListener('click', clickSquare);
}
}
I've tried naming the returned anonymous function and using removeEventListener on that to no avail.
To remove event listener from a DOM element you need to pass the same function you used while adding event listener, as the parameter.
In javascript when you create an object it creates a new instance of that object class, so it won't be equal to another object even if it is created with same parameters
Example:
{} != {} // returns true
[] != [] // returns true
Same goes with function, whenever you write function (){} it creates a new instance of Function class.
Example:
function a() {
return function b() {}
}
a() != a() // returns true
Solution:
So for you to be able to remove the event listeners, you will have to store the functions you have passed to addEventListener
var listeners = [];
function setupPlayer(player) {
var squareState = {};
for (i = 0; i < allSquares.length; i++) {
if(allSquares[i].innerHTML === "") {
listeners[i] = clickSquare(i);
document.getElementById(allSquares[i].getAttribute('id')).addEventListener('click', listeners[i]);
}
}
}
function clickSquare(i) {
var num = i;
return function() {
document.getElementById(allSquares[num].getAttribute('id')).innerHTML=player;
}
}
function removeClickEvents() {
for (let i = 0; i < allSquares.length; i++) {
if(listeners[i]) {
document.getElementById(allSquares[i].getAttribute('id')).removeEventListener('click', listeners[i]);
}
}
}
From your code where you are using
document.getElementById(allSquares[i].getAttribute('id'))
I am assuming that allSquares[i] is a DOM element already, your code can be more simplified
var listeners = [];
function setupPlayer(player) {
var squareState = {};
for (i = 0; i < allSquares.length; i++) {
if(allSquares[i].innerHTML === "") {
listeners[i] = clickSquare(i);
allSquares[i].addEventListener('click', listeners[i]);
}
}
}
function clickSquare(i) {
var num = i;
return function() {
allSquares[num].innerHTML=player;
}
}
function removeClickEvents() {
for (let i = 0; i < allSquares.length; i++) {
if(listeners[i]) {
allSquares[i].removeEventListener('click', listeners[i]);
}
}
}
The function is being called immediately at (clickSquare)(i). At code at Question allSquares appears to be the element itself, clickSquare function can be referenced directly and event.target can be used within event handler to reference the current element in allSquares collection
let player = 123;
setInterval(() => player = Math.random(), 1000);
onload = () => {
let allSquares = document.querySelectorAll("div[id|=square]");
let button = document.querySelector("button");
button.onclick = removeClickEvents;
function setupPlayer(player) {
var squareState = {};
for (let i = 0; i < allSquares.length; i++) {
if (allSquares[i].innerHTML === "click") {
// set up a click event for each square
allSquares[i].addEventListener('click', clickSquare);
}
}
}
function clickSquare(event) {
console.log(event.target);
event.target.innerHTML = player;
}
function removeClickEvents() {
for (let i = 0; i < allSquares.length; i++) {
allSquares[i].removeEventListener('click', clickSquare);
}
}
setupPlayer(player);
}
<div id="square-0">click</div>
<div id="square-1">click</div>
<div id="square-2">click</div>
<button>remove events</button>
how can I set the object (which is part of the buttons array) as a parameter within the addEventListener function? buttons[i] is not working..
Here is a part of the code:
var buttonNames = ["canteen","locations","floorplan","guestbook","pictures"];
var buttonDivNames = ["btn1","btn2","btn3","btn4","btn5"];
var buttons = [];
window.onload = function() {
for(var i = 0; i<buttonNames.length; i++) {
var obj = new Object();
obj.targetLink = buttonNames[i] + ".html";
obj.defaultImage = "img/buttons/"+buttonNames[i]+"_default.jpg";
obj.hoverImage = "img/buttons/"+buttonNames[i]+"_hover.jpg";
obj.div = document.getElementById(buttonDivNames[i]);
obj.divPicture = obj.div.getElementsByClassName("thumbnailPicture")[0];
obj.divLink = obj.div.getElementsByClassName("thumbnailLink")[0];
buttons.push(obj);
}
for(var i = 0; i<buttons.length; i++) {
buttons[i].divPicture.addEventListener("mouseover",function() { anotherFunction(buttons[i]) },false)
}
}
function anotherFunction(arg) {
console.log(arg.targetLink);
}
Thanks guys, this way it works:
for(var i = 0; i<buttons.length; i++) {
initButton(buttons[i]);
}
}
function initButton(arg) {
arg.divPicture.addEventListener("mouseover",function() {anotherFunction(arg);},false)
}
function anotherFunction(arg) {
console.log(arg.targetLink);
}
As pointed out in the comment section, you could use an IIFE to create a new scope, that holds the value of the current i:
for(var i = 0; i<buttons.length; i++) {
(function (i) {
buttons[i].divPicture.addEventListener("mouseover",function() { anotherFunction(buttons[i]) },false)
}(i));
}
or, even better, create a seperate function that handles the adding of the eventlistener:
function addEventlistenerToButton(button) {
button.divPicture.addEventListener("mouseover",function() { anotherFunction(button) },false)
}
// ....
for(var i = 0; i<buttons.length; i++) {
addEventlistenerToButton(buttons[i]);
}
In addition to that, you could also omit sending the button to the eventlistener completely and get the button from the event object directly:
for(var i = 0; i<buttons.length; i++) {
buttons[i].divPicture.addEventListener("mouseover", anotherFunction, false);
}
function anotherFunction(ev) {
ev = ev || window.event;
var src = ev.target || ev.srcElement;
console.log(src.parentNode);
}
I have this javascript snippet:
var selectName["id1","id2","id3"];
setOnClickSelect = function (prefix, selectName) {
for(var i=0; i<selectName.length; i++) {
var selId = selectName[i];
alert(selId);
$(selId).onchange = function() {
$(selId).value = $(selId).options[$(selId).selectedIndex].text;
}
}
}
But when I change value to my id1 element, the alert wrote me always "id3".
Can I fix it?
EDIT:
I've changed my snippet with these statements:
setOnChangeSelect = function (prefix, selectName) {
for(var i=0; i<selectName.length; i++) {
var selId = selectName[i];
$(selId).onchange = (function (thisId) {
return function() {
$(selId).value = $(thisId).options[$(thisId).selectedIndex].text;
}
})(selId);
}
}
But selId is always the last element.
This is caused by the behavior of javaScript Closure, selId has been set to the selectName[2] at the end of the loop and that's why you get 'id3' back.
An fix is as following, the key is wrap the callback function inside another function to create another closure.
var selectName = ["id1","id2","id3"];
var setOnClickSelect = function (prefix, selectName) {
for(var i = 0; i < selectName.length; i++) {
var selId = selectName[i];
$(selId).onchange = (function (thisId) {
return function() {
$(thisId).value = $(thisId).options[$(thisId).selectedIndex].text;
}
})(selId);
}
};
Ps: there is synyax error for var selectName["id1","id2","id3"], you should use var selectName = ["id1","id2","id3"];