span inside p tag with textContent and style.color doesn't work

May 29, 2024

I have a problem with Javascript and HTML and I didn’t find any solution yet.

The code is here:

const valide = document.querySelector("#valider");
valide.addEventListener("click", valider);

function valider() {;
    let showEmotion = document.getElementById("test").value;

    if (showEmotion === "happy") {
        document.getElementById("show").textContent = "I'm";
        document.getElementById("mood").textContent = "happy";
        document.getElementById("mood").style.color = "blue"
    }
    else if (showEmotion === "sad"){
        document.getElementById("show").textContent = "I'm";
        document.getElementById("mood").textContent = "sad";
        document.getElementById("mood").style.color = "blue"
    }

    else {
        document.getElementById("show").textContent = "I'm";
        document.getElementById("mood").textContent = "happy";
        document.getElementById("mood").style.color = "blue"
    }
}

<h1>What's your mood ?</h1>
<body>
    <label>Mood: <input type="text" id="test" name="test" required minlength="2" maxlength="8" size="10" /></label>
    <button id="valider">Check</button>
    <hr/>
    <p id="show"><span id="mood"></span></p>
</body>

I don’t know why I have only "I’m" when I click on the button and I haven’t "I’m happy" or "I’m sad" with blue happy (or sad).

I want the complete sentence "I’m happy" or "I’m sad"

I think this is because the span tag is inside a p tag because I saw this can work with span tag only If I remember but I don’t why it doesn’t work inside a p tag.

Maybe because the span tag in an inline-level element and p is a block-element ?

>Solution :

I think this is because the span tag is inside a p tag

Yes, but perhaps not for the reason you think. Since the id="mood" element is inside the id="show" element, then when you do this:

document.getElementById("show").textContent = "I'm";

You effectively clobber that content. At that point the id="mood" element no longer exists. So the very next line produces an error:

document.getElementById("mood").textContent = "happy";

You can observe this error on your browser’s development console.

Instead of nesting the target tags inside each other and having to worry about maintaining their content, just use two elements nested inside a container. Edit the contents of those two elements, leaving the container as-is. For example:

const valide = document.querySelector("#valider");
valide.addEventListener("click", valider);

function valider() {;
    let showEmotion = document.getElementById("test").value;

    if (showEmotion === "happy") {
        document.getElementById("show").textContent = "I'm";
        document.getElementById("mood").textContent = "happy";
        document.getElementById("mood").style.color = "blue"
    }
    else if (showEmotion === "sad"){
        document.getElementById("show").textContent = "I'm";
        document.getElementById("mood").textContent = "sad";
        document.getElementById("mood").style.color = "blue"
    }

    else {
        document.getElementById("show").textContent = "I'm";
        document.getElementById("mood").textContent = "happy";
        document.getElementById("mood").style.color = "blue"
    }
}

<h1>What's your mood ?</h1>
<body>
    <label>Mood: <input type="text" id="test" name="test" required minlength="2" maxlength="8" size="10" /></label>
    <button id="valider">Check</button>
    <hr/>
    <p><span id="show"></span> <span id="mood"></span></p>
</body>