Why changing variable equal to a HTML collection changes the original values of the collection? Why changing variable equal to a HTML collection changes the original values of the collection?

There's a different behaviour that I see that I can't really understand exactly why this happens. Originally, after making a variable equal to another, it will only copy the value of one variable to another, but if I change the value of a variable after that, the other variable won't be affected, right? As in:

let a = 3
let b = 5
b = a
//here the variable b, that was 5 will become the same as the variable a, becoming 3.
a = 10
//now, if I change the value in a to 10, b will still have the value of 3.

That's pretty basic JavaScript, I know. But knowing that, I can't understand why it's different when it comes to HTMLcollection.

Here is the situation:

const allLi = document.getElementsByTagName('li'); 
for (let xis of allLi) {
    xis.classList.toggle('highlight');
}

Here I got a HTMLcollection and assigned it to the variable allLi, and then I used a for of loop to modify it, thus changing the original values in the HTMLcollection, that reefer to the class values of the li elements.

My question is: why in this case if I change a variable through the loop I'm able to modify the original values in the HTMLcollection? Why it's different of when I declare a new value to a in the previous example and the other variable keeps unchanged?

Thank you very much.



from Stackoverflow

Comments

Post a Comment

Popular posts from this blog

\\u0000 cannot be converted to text error \\u0000 cannot be converted to text error

I am using NextJS and supabase to insert some data into PostgreSQL database. Data is array of objects. The error is like this \\u0000 cannot be converted to text. unsupported Unicode escape sequence . There is no unicode character like \\u0000 in my data. There is a error response but I cant see which keys value is causing the error. Is there any way to resolve this issue? const Data = async (req, res) => { try { const { data, error } = await supabase.from('db').insert([]) return res.status(200).json({ data: data, error: error, }); } catch (error) { console.log(error); } } from Stackoverflow
Read more

How to create @click on select menu in VueJS How to create @click on select menu in VueJS

I wanna create @click in my select menu which is empty by default. I tried to create it in select , option and even div , but it doesn't to seem work. So, I have this code in my template : <div style="float: right; padding-right: 13px"> <span> Sort by: </span> <select v-model="sort"> <option v-for="item in items" :key="item.id" :value="item" @click="sortBy" v-text="item.title" ></option> </select> </div> This in data : items: [ { id: 1, title: 'Price: Low to High', sort: 1 }, { id: 2, title: 'Price: High to Low', sort: 2 }, { id: 3, title: 'Newest first', sort: 3 }, { id: 4, title: 'Oldest first', sort: 4...
Read more

Using Ts-Standard linting, JSDoc comment at beginning of file triggers "This rule requires the `strictNullChecks` compiler option" error Using Ts-Standard linting, JSDoc comment at beginning of file triggers "This rule requires the `strictNullChecks` compiler option" error

I'm using Typescript and the TS-standard version of StandardJS's ESlint plugin and extension for VSCode. I have been using JSDoc-style comment blocks ( /** Some text */ ) at the beginning of javascript and now typescript files to indicate things like author and give a general overview of the contents of the file. I was using the standardJS eslint plugin already, but it generally didn't work properly on my code library, never figured out why. Recently I started upgrading my codebase to Typescript, and now I'm getting this error on all of these comment blocks: This rule requires the `strictNullChecks` compiler option to be turned on to function correctly. (@typescript-eslint/strict-boolean-expressions)ts-standard(@typescript-eslint/strict-boolean-expressions) I tried turning on the strictNullChecks option, and it did indeed clear that error, but is also a nightmare for certain places where I know values aren't going to be null if the object exists at all (and using...
Read more