Kevin Powell - Community•3mo 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•3mo ago

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

KivoryOP•3mo ago

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

ἔρως•3mo ago

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

KivoryOP•3mo ago

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

ἔρως•3mo ago

just check on mdn it has examples too

Jochem•3mo 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•3mo 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

ἔρως•3mo ago

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

KivoryOP•3mo ago

well the font size didnt change haha

ἔρως•3mo 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?