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)'
                
                })

            }
 
Ad

Advertisements

Joined
Mar 11, 2022
Messages
82
Reaction score
8
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

Top