So basically in the bellow code I want to access the image which is related to the index of the array. Now on the console.log(i), I get "1" as there are two elements in the array.
However, when I click the "array" I get "../[object%20PointerEvent]1.png". This causes an error as the file name is 1.png not the above.
Does anyone know how I can remove the [object%20PointerEvent] so I just have the "../1.png"?
Thank you
for(let i = 0; i < array.length; i++) {
console.log(i);
array[i].addEventListener("click", function nextImage(i) {
image.src = i +".png";
});
}
You have two different variables named i.
The one defined in the for loop that you want
The parameter in your callback function which is passed the Event object that you get
Rename the second one so you stop shadowing the first one. Traditional names are e or event but since you aren't using it, you could just remove it.
Using a tool like eslint with the no-shadow rule could have caught this error for you.
The value passed into the object will automatically be the event and not the value from the array. A better way of doing this is:
array[i].addEventListener("click", function nextImage(a){return (event)=>{
image.src = a +".png"}
}(i)
);
Related
While creating an array of table data, I'm trying to pass the current ID of an image into a function using an onClick event. What am I doing wrong here? I had the impression a simple solution such as this.id or an event handler would function correctly. Any ideas? Thank you!
function deleteRecord(event)
{
alert(event.target.id);
}
let j = 0;
for(let i in dataRes)
{
j++;
arr.push
(
<tr>
<td><div><img id={j} src={"RANDOM IMAGE"} onClick={(event)=>deleteRecord(event)} /><span id={"item"+j}>{DATA}</span></div></td>
<td>{DATA}</td>
<td>{DATA}</td>
</tr>
);
}
You're passing in the onClick event into the function, when all you need to pass is the value of j. However, we want to pass the value of j at the point in the loop, so we need to make a copy of j before passing it in.
So right after j++;, we need to create a new copy let j_copy = j;
Then your onClick function should be:
onClick={()=>deleteRecord(j_copy)}
and your deleteRecord function:
function deleteRecord(index)
{
alert(index); // alerts the value of j_copy
}
This hard-codes the value of j each time the loop runs. Note that each time the loop runs, a new HTML fragment with a different onClick handler gets generated with that hard-coded value. So the first time, it's equal to onClick={()=>deleteRecord(1)}, the second time it's onClick={()=>deleteRecord(2)}, and so on.
My file works just fine in the first round of loop when i try to rerun the function again. It shows the previous value of the previous loop when i try to use the value to match and after which it shows the correct value. If i run the function again and again, it keeps holding on to the value of the previous generated random value.
for (var i=0; i<9; i++)
{
var ranD = Math.floor(Math.random()*33);
if (mathStar.indexOf(ranD)== -1) {
mathStar.push(ranD);
item[i].innerHTML = mathStar[i];
}
else {
i--;
}
itemVal[i].value = mathStar[i];
}
Substitute using const and let for var within for loop to avoid creating global variables and --i could have unexpected results within the code where i++ is also used in the foor loop.
Is this the first occurrence of "mathStar"?
If this is the first place you're using mathStar, it means it gets created globally and that usually leads to confusion. In this case, take a look at this.
Looking at just this, it seems that you are not resetting your "mathStar" value. This way, any time you run this loop for the nth time, the values you have added to "mathStar" using mathStar.push(...) also occur in the list of values.
Hello i am not sure why those empty elements still there even i clear (or clear function does not work guess). Might you guys have a look on this. I am getting this array after add another value into same array.I am asking whats is happening behind not just solving code thank you
this is function when ever i click button it adds 4 into DVALUE array.
if("q"+idcount+"d" == this.id){
DVALUE[dcount++] = 4;
// alert("D ARRAY"+DVALUE.toString());
}
And this is when ever i click revert button it will remove last added number
if ("d" === qwer) {
// alert(""+DVALUE.toString());
DVALUE.pop();
cleararrayD(); // also calling this function to remove empty elements when ever this if occurs
}
And this is cleararrayD Function
function cleararrayD() {
lens = DVALUE.length, i;
for (i = 0; i < lens; i++) DVALUE[i] && DVALUE.push(DVALUE[i]); // copy non-empty values to the end of the array
DVALUE.splice(0, lens);
}
I am asking whats is happening behind not just solving code
The .length of DVALUE array does not change at cleararrayD() function call as an element is .push()ed to DVALUE array for each index of DVALUE before .splice() is called with original array .length at second parameter, removing the preceding elements to the elements .push()ed to the array.
Okey i got answer for my question. As you can see it clears array but i put element at wrong indexes. Everytime i click button Dcount++ adding indexes so i just doing this Dcount-- in my removing functions
DVALUE[dcount++] = 4;
I have a list of checkboxes that I want to check if they are checked. I want to loop through the array of objects and check one by one but I cannot get the size of the array. I have tried the following 2 ways but I get different errors.
var i, n;
networkStatusDetail.detailsList.all(by.tagName('div')).then(function(arr){
console.log(arr.length);
for(i=0;i<; i++){
arr.get(i).element(by.model('displayedsites[site.siteid]')).isSelected().then(function(checked){
expect(checked).toBe(true);
});
}
});
With this code above I get an error saying that arr.get() is not a valid function.
The following code does not work because I am unable to get the size of the array. Assigning the size of the array to another variable only works within a promise function, but once the variable is used outside the value is gone.
networkStatusDetail.detailsList.all(by.tagName('div')).then(function(size){
n = size;
console.log('n = '+n);
});
console.log('n outside '+ n);
for(i=0;i<n; i++){
check.get(i).element(by.model('displayedsites[site.siteid]')).isSelected().then(function(checked){
expect(checked).toBe(true);
// console.log(i);
});
}
the 2 consoles will print 512 and undefined respectively, showing that the value of n outside of the promise function does not work.
I can only make it work if I manually set the max value of the for loop, but this value can change over time so It's not correct.
If anybody could give me a hand on how to do this it would be greatly appreciated.
You don't need to know how many checkboxes are there to loop over them - use map() or each() instead:
element.all(by.model('displayedsites[site.siteid]')).each(function (checkbox) {
return checkbox.isSelected().then(function (isSelected) {
console.log(isSelected);
});
});
Neither this nor that works. Does anyone know what is going on??
Edit:
qwerty is simply called as "qwerty();" when in other pieces of code.
It is supposed to be indepedent.
Edit: I realize what is wrong. The problem lies with the i...
function qwerty () {
..... for loop that changes i ......
var that = this;
this.chara[i] = createlabel.....
this.chara[i].addEventListener('click', function(e) {
var j = e.source.id;
alert("hello word");
alert(this.chara[j].width); // I get the error here
});
this.chara[i].addEventListener('doubleclick', function(e) {
alert("hello word");
alert(that.chara[i].width); // I get the error here too.
});
}
Any JS problem relating to this is likely due to the way the function using this is called. Storing a reference to this in your that variable should let you reference it from within your nested functions, exactly the way you are doing it already - assuming that qwerty() is called in a way that sets this to the correct object in the first place. (Personally I like to call such a variable self since it more accurately reflects what the variable is doing.)
However, in your function you say you get the error on this line:
that.chara[i].width
Given that you say this.chara[i].addEventListener(...) I'm guessing that the chara[i] variable holds a reference to a DOM element. If that is the case I'm guessing it is an element type that doesn't have a width property. Try this:
that.chara[i].style.width
https://developer.mozilla.org/en/CSS/width
That's the best I can do for you without more information about what error you're getting and how the qwerty() function is called...