Kevin Powell - Community•4w ago

What's wrong with my JS code here?

This is code to make each ".user-message" div that's created test if its font-family is "Roboto", and if it is, to change the font size to 40px.

let paras = document.querySelectorAll('.user-message');

paras.forEach((para) => {
    let compStyles = window.getComputedStyle(para);
    let computedFontFamily = compStyles.getPropertyValue('font-family')
    if (computedFontFamily == "Roboto"){
            para.style.fontSize = "40px";
        }
     }
)

let paras = document.querySelectorAll('.user-message');

paras.forEach((para) => {
    let compStyles = window.getComputedStyle(para);
    let computedFontFamily = compStyles.getPropertyValue('font-family')
    if (computedFontFamily == "Roboto"){
            para.style.fontSize = "40px";
        }
     }
)

new divs with the ".user-message" tag are created every second. none of them are having their font size changed though when they're created. What's the way to go about this?

10 Replies

Jochem•4w ago

that code will run once for the .user-messages that exist, and then never again unless you trigger it again

KivoryOP•4w ago

ah. should I wrap it in a function and make it run everytime one of the divs is created?

ἔρως•4w ago

also, you're checking if it is exactly Roboto, which may or may not be the case a mutation observer

KivoryOP•4w ago

definitely is the case im not familiar. can you link me something on this?

ἔρως•4w ago

just check on mdn it has examples too

Jochem•4w ago

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

MDN Web Docs

MutationObserver - Web APIs | MDN

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature, which was part of the DOM3 Events specification.

KivoryOP•4w ago

let parent = document.querySelectorAll('.main-container');

const mutationObserver = new MutationObserver(entries => {
    let paras = document.querySelectorAll('.user-message');
    paras.forEach((para) => {
        let compStyles = window.getComputedStyle(para);
        let computedFontFamily = compStyles.getPropertyValue('font-family');
        if (computedFontFamily == "Madeena"){
            para.style.fontSize = "40px";
        }
    })
})

mutationObserver.observe(parent, {childList: true})

let parent = document.querySelectorAll('.main-container');

const mutationObserver = new MutationObserver(entries => {
    let paras = document.querySelectorAll('.user-message');
    paras.forEach((para) => {
        let compStyles = window.getComputedStyle(para);
        let computedFontFamily = compStyles.getPropertyValue('font-family');
        if (computedFontFamily == "Madeena"){
            para.style.fontSize = "40px";
        }
    })
})

mutationObserver.observe(parent, {childList: true})

Okay, tried this, didn't work though, not sure what's wrong

ἔρως•4w ago

define "didnt work" this should run that code when a node is added in the parent element

KivoryOP•4w ago

well the font size didnt change haha

ἔρως•4w ago

yeah, but that can be anything for example, wrong font name or how you're adding the file to the html please, create a codepen/jsfiddle that shows the problem

Gaming

Programming

What's wrong with my JS code here?

Did you find this page helpful?