Question 319179 in Html Question posted in
Some basic documentation can be found here.

how to reset textPlacement.innerHTML

I want to have it so when the button is pressed it will reset the value of textPlacement.innerHTML += ""; (so there’s no text). The problem is that when I press the button it adds the new value to the right of the previous values. Please keep in mind I want to keep the HTML TEXT "Background Colour : "

let textPlacement = document.getElementById("insert-colour");
let simpBackgroundColour = (Math.floor(Math.random() * 3)) + 1;

textPlacement.innerHTML += "";

if (simpBackgroundColour === 1) {
  document.body.style.background = "#eb1e17";
  textPlacement.innerHTML += "Red";
} else if (simpBackgroundColour === 2) {
  document.body.style.background = "#2390de";
  textPlacement.innerHTML += "Blue";
} else {
  document.body.style.background = "#d9d923";
  textPlacement.innerHTML += "Yellow";
}
<h class="background-colour-box" id="insert-colour">Background Colour : </h>

<div class="button">Click Me</div>
Tags:

2

Answers


  1. 0

    You just have to reset the textPlacement.innerHTML with "Background Colour : ".
    When you use + with the string, it will do concat(keep adding the other string).

    //uncomment the below code if you want to keep `h1` tag background red
//document.getElementById('insert-colour').style.backgroundColor = 'red';

document.getElementById('button').addEventListener('click', function() {

    let textPlacement = document.getElementById("insert-colour");
    let simpBackgroundColour = (Math.floor(Math.random() * 3)) + 1;

    textPlacement.innerHTML = "Background Colour : ";

    if (simpBackgroundColour === 1) {
        document.body.style.background = "#eb1e17";
        textPlacement.innerHTML += "Red";
    } else if (simpBackgroundColour === 2) {
        document.body.style.background = "#2390de";
        textPlacement.innerHTML += "Blue";
    } else {
        document.body.style.background = "#d9d923";
        textPlacement.innerHTML += "Yellow";
    }
});
        
    <h1 class="background-colour-box" id="insert-colour">Background Colour : </h1>

<button class="button" id="button">Click Me</button>
    Login or Signup to reply.
  2. 0

    Why not just set "Background Color: color" on each if?

    let textPlacement = document.getElementById("insert-colour");
let simpBackgroundColour = (Math.floor(Math.random() * 3)) + 1;

if (simpBackgroundColour === 1) {
  document.body.style.background = "#eb1e17";
  textPlacement.innerHTML += "Background Colour :Red";
} else if (simpBackgroundColour === 2) {
  document.body.style.background = "#2390de";
  textPlacement.innerHTML += "Background Colour : Blue";
} else {
  document.body.style.background = "#d9d923";
  textPlacement.innerHTML += "Background Colour : Yellow";
}
<h class="background-colour-box" id="insert-colour">Background Colour : </h>

<div class="button">Click Me</div>

    This will keep Background Color on whatever statement matches, and will rewrite the innterHTML each time.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search