How do I use forEach() for the * selector from a querySelectorAll()?

Joined
May 5, 2022
Messages
1
Reaction score
0
THE section of code with the querySelectorAll('*') does not work.

JavaScript:
//changes the color theme of the UI
        eleTheme.addEventListener('change', (event) => {
            
            if (event.target.value === "matrix") {
                
                document.getElementById('contMain').style.backgroundColor = 'rgb(33, 33, 33)'
                document.getElementById('input').style.color = 'rgb(0, 255, 0)'
                document.getElementById('input').style.borderColor = 'grey'
                document.getElementById('option').style.backgroundColor = 'rgb(33, 33, 33)'

                let eleClasses = document.querySelectorAll('*')
                eleClasses.forEach(ele => {

                    ele.style.color = 'rgb(46, 214, 219)'
                    ele.style.borderColor = 'grey'
                
                })

            }

            if (event.target.value === "ocean") {
                
                document.getElementById('contMain').style.backgroundColor = 'rgb(18, 19, 41)'
                document.getElementById('input').style.color = 'rgb(46, 214, 219)'
                document.getElementById('input').style.borderColor = 'grey'

                let eleClasses = document.querySelectorAll('.contCenter')
                eleClasses.forEach(contCenter => {

                    contCenter.style.color = 'rgb(46, 214, 219)'
                    contCenter.style.borderColor = 'grey'
                
                })

                eleClasses = document.querySelectorAll('.cont')
                eleClasses.forEach(cont => {

                    cont.style.color = 'rgb(46, 214, 219)'
                    cont.style.borderColor = 'grey'
                
                })

                eleClasses = document.querySelectorAll('.contColumn')
                eleClasses.forEach(contColumn => {

                    contColumn.style.color = 'rgb(46, 214, 219)'
                    contColumn.style.borderColor = 'grey'
                
                })

                eleClasses = document.querySelectorAll('.contRow')
                eleClasses.forEach(contRow => {

                    contRow.style.color = 'rgb(46, 214, 219)'
                    contRow.style.borderColor = 'grey'
                
                })

                eleClasses = document.querySelectorAll('select')
                eleClasses.forEach(select => {

                    select.style.color = 'rgb(46, 214, 219)'
                    select.style.borderColor = 'grey'
                
                })

                eleClasses = document.querySelectorAll('option')
                eleClasses.forEach(option => {

                    option.style.color = 'rgb(46, 214, 219)'
                    option.style.borderColor = 'grey'
                    option.style.backgroundColor = 'rgb(18, 19, 41)'
                
                })

                eleClasses = document.querySelectorAll('p')
                eleClasses.forEach(p => {

                    p.style.color = 'rgb(46, 214, 219)'
                
                })

            }
 
Joined
Mar 11, 2022
Messages
227
Reaction score
32
First of all. querySelectorAll returns an array of objects, not an object. Next thing is the use of let, var, const and so on. let is similar to var, but not the same.

In other words: contCenter is returned as an object. Not as a html element. You can't style an NOT HTML Object. That's only one reason why i hate JQuery. Make no sence.

So instead of:
Code:
eleClasses.forEach(contCenter => {

                    contCenter.style.color = 'rgb(46, 214, 219)'
                    contCenter.style.borderColor = 'grey'
           
                })

you should go with:
Code:
  for(var i in eleClasses){
                    var contCenter=eleClasses[i];
               
                     contCenter.style.color = 'rgb(46, 214, 219)'
                    contCenter.style.borderColor = 'grey'
           
                }

Better explanation

Actually almost everything is an object in Javascript. Even arrays are cast as objects. Which could be confusing.
HTML Elements are Objects also.
Code:
var myObject=document.getElementById('whatever');
//myObject supports style commands hence it is a styleable object

But
Code:
var myObject={name:'apple',type:'fruit'}
//myObject can't be styled
Exeption:
Code:
var myObject={name:'apple',type:'fruit',myhtml:document.getElementById('whatever')}
//myObject can't be styled but myObject.myhtml can be. So myObject.myhtml.style.color='red'; would work.
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top