Can I make a div in .js and then modify its CSS?

I know my “create multPic” is making divs with class “item” because I have this in the CSS and the numbers are blazing aqua:

.item { color:aqua; }

… and when I put this in my javascript, it turns all the backgrounds to all my buttons in class .button1 yellow:

changeBackgrounds('.button1','yellow');

function changeBackgrounds(selectorStr, bgColor) {
  let newColor=bgColor;
  let thing=selectorStr;
  document.querySelectorAll(thing).forEach(elem=>{elem.style.backgroundColor=newColor;});
} 

… but if I change ‘.button1’ to ‘.item’, (or to the more complicated section > div selectors) then nothing breaks, but nothing happens, even though that is also a class.

changeBackgrounds('section > div','yellow');
function changeBackgrounds(selectorStr, bgColor) {
  let newColor=bgColor;
  let thing=selectorStr;
  document.querySelectorAll(thing).forEach(elem=>{elem.style.backgroundColor=newColor;});
}

…If I go back and put in 100 individual divs in the HTML, instead of creating them in the javascript as a loop, it works. Is there a way around this (doing things in a different order? Putting them in another .js file?) I’m happy it works but wondering if I’m missing a detail to make things less repetitious. (and yes, I have it working so it changes the nth child number now – but with making the divs in .js I could adjust how many numbers I had.)

I think we will need to see all of your code to help.

Oh, it seems if I put the changes in a separate *.js file, it works! it works :slight_smile: :slight_smile:

1 Like

Here’s the code bUT i am pretty srue I have solved the problem already making a second .js file.

`

<div id="buttonsDiv" class="gridBig">  
  <!-- check this ID it might not be necessary; it's the whole blooming div.  -->
  <div id="restart">
     <button id="start"  class="button1" onclick="startUp();">Start</button> 
   <button id="reset"  class="button1" disabled="true" onclick="startUp();">Start over</button>
   
    </div>

  <section id="multPic" class="centerMult"  >
   
   <!-- javascript will populate with divs depending on what my fact is

    </section>

``

That’s the HTML

var factNum=10;// the starting number to be multiplied by; the 'answer'
var factSet=3;  // the facts you're practicing:   the twos for this.  this is arbitrary right now; I'll figure out how to make this happen in proper sequence later.  
// to show number chart 1 to 100 with every N div in a different color.  RIght now it's set so it only shows enough for your facts (e.g. for the 2's it would only go to 20).   

function createMultImage()
{
  var multPicHTML="";
  let numMax = factSet*10;
  for (let num=1; num<=numMax; num++)
  { 
      multPicHTML +='  <div class = "item" id="d'+num + '" >' + num + ' </div>'; 
  }
   multPic.innerHTML=multPicHTML;
}

… the stuff that didn’t work in the same .js file is here:

changeBoth(factSet);
function changeBoth(n)
{
  changeBackgrounds('section > div', 'palevioletred');
  changeBackgrounds('section > div:nth-child(' + n + 'n)', 'yellow');
}
function changeBackgrounds(selectorStr, bgColor) {
  let newColor=bgColor;
  let thing=selectorStr;
  document.querySelectorAll(thing).forEach(elem=>{elem.style.backgroundColor=newColor;});
}

but it seems to work when I made a separate file (tho’ I’m multitasking now and not 100% sure ;)) as if it read the first .js file,did that stuff, and then read the second one.

(well, now I’m glad I posted that. Somehow that “second .js file” has been rendered blank in all my versions. I still have to recreate my new ande improved “only shade the numbers that are the facts you need to know” line but this will save me some time!)