Im new to javascript, Im trying to have the next thing, When click on the button, it change the value of the variable "value" to true or false depend on the prior value, and depending on that it will change the background color of the text, but I cant see any change!

let value = true
const container = document.querySelector(".container")
let color = " "

function changeColor() {
  value = !value
  console.log(value)
  if (value) {
    color = "background-color:purple"
  } else {
    color = " "
  }

  console.log(color)
}


container.innerHTML = `<div style= ${color} >This is a TEST</div>`

body {
  font-size: 2rem;
  font-weight: 900;
}

.container {
  border: 5px solid;
  width: 250px;
  height: 100px;
}

<div ></div>
<button onclick="changeColor()">Click</button>

CodePudding user response：

This question has already been answered, but I'd like to help you understand why it wasn't working.

It looks like when you set the html content and use a template literal (backticks and ${}) you're setting the html string to <div style=background-color:purple;></div>. Html properties need quotations to work, so a solution might look something like this:

container.innerHTML = `<div style="${color}">This is a TEST</div>`

Second, your statement to set the innerHTML of the container is outside of the function, so it only runs once when the page first loads. Move it inside of the function to fix this.

At this point, everything should work. I've created a jsfiddle to show it off the way you wanted it to work: https://jsfiddle.net/ahpw07uf/

For future reference, it's a lot easier to use element.style.backgroundColor = "purple" (which will automatically add background-color: purple; to the element's style property) or toggling a class like mentioned above.

CodePudding user response：

The key issue is that once you add the element to the container you're no longer able to affect the style attribute unless you pick up that element from the DOM again.

The other issue is that you should reset your value variable after the change has been made:

let value = true
const container = document.querySelector(".container")
let color = "";

function changeColor() {

  // Pick up the element from the DOM
  const inner = container.querySelector('div');

  // Update the style
  if (value) {
    inner.style = "background-color:purple"
  } else {
    inner.style = "";
  }

  // Now update the value
  value = !value

}

container.innerHTML = `<div style= ${color} >This is a TEST</div>`

body {
  font-size: 2rem;
  font-weight: 900;
}

.container {
  border: 5px solid;
  width: 250px;
  height: 100px;
}

<div ></div>
<button onclick="changeColor()">Click</button>

It might be easier to toggle a class on/off than rely on a variable to update the style.

1. I've removed the inline JS and attached an event listener to the button, and added a class to the appended div element.

2. When the click event is fired the changeColor function is called. We can get the inner element through the container, and then toggle the purple class on the element's classList with each click.

// Cache the button, and add a listener to it
const button = document.querySelector('button');
button.addEventListener('click', changeColor);

// Cache the container, add the HTML to it, and then
// cache the inner element too for convenience
const container = document.querySelector('.container');
container.innerHTML = `<div >This is a TEST</div>`;
const inner = container.querySelector('.inner');

// Toggle the class on/off with each click
// of the button
function changeColor() {
  inner.classList.toggle('purple');
}

body {
  font-size: 2rem;
  font-weight: 900;
}

.container {
  border: 5px solid;
  width: 250px;
  height: 100px;
}

.purple { background-color: purple; }

<div ></div>
<button type="button">Click</button>