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.)
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!)