#using setAttribute

4 messages · Page 1 of 1 (latest)

fallow mauve
# 

    let planet1 = document.getElementById("greenplanet");
    let planet2 = document.getElementById("redplanet");
    let planet3 = document.getElementById("blueplanet");

    planet1.textContent = "All is well.";
    planet2.innerHTML;
    planet3.innerHTML;

    // planet1.setAttribute("background-color", "blue");
    planet1.setAttribute("class", "redtext");
}

window.onload = init; ```

Currently trying to change the text to red in ${planet1}, I understand it's going to be making a class attribute with redtext but according to the beginner's guide to JavaScript: Head First JavaScript - it should be highlighted in red? So I'm not sure why it's not working for me. I don't have <style> tags for my neither of my elements
maiden brook
#

You did not show any HTML or CSS and this code depends on both to work correctly, but you might still have a specificity problem even if they are correct. The HTML must have elements with id of "greenplanet","redplanet", and "blueplanet". The CSS must have at least a definition for the "redtext" class. The specificity problem is that an id has higher specificity than a class. If your CSS has styling for the "planet1" id and the style conflicts with "redtext", the higher specificity of the id causes the styling of the class to be ignored. This code can work if the styling doesn't conflict. For example, the greenplanet could be styled to have a green background while redtext is styled to have red text.

#

I just saw that you don't have style tags. This code only assigns a class. This class does not inherently have any styles of its own, so assigning this class won't change the appearance in any way.

fallow mauve