How to remove inner HTML content onchange-CodePudding

I created a form where a user selects options from a checkbox list. So when a user selects an option in the checkbox, I use a function to show the value of the input field using onchange within inner HTML. My question is, how do we remove that same inner HTML content if the user un-selects those options? So when the user toggles back and forth, it either appears or when un-selected, the value gets removed. Thanks

function functionOne() {
  var x = document.getElementById("wheels").value;
  document.getElementById("demo").innerHTML = x;

}

<input type="checkbox" id="wheels" onchange="functionOne()" value="feature 1">

<div id="demo"></div>

CodePudding user response：

Check the state of the checkbox before you read the value.

function functionOne(cb) {
  var x = cb.checked ? cb.value : '';
  document.getElementById("demo").innerHTML = x;

}

<input type="checkbox" id="wheels" onchange="functionOne(this)" value="feature 1">

<div id="demo"></div>

CodePudding user response：

Inside the change function on deselect do this:

document.getElementById("demo").innerHTML = '';

CodePudding user response：

The element that is changed has a checked property which can be inspected - it will be either true or false. So write an if/else condition to update the content of the demo element depending on its value.

I've adjusted your code slightly to cache the elements outside of the function, and to add an event listener to the checkbox instead of using inline JS which is a bit old-school these days. Also, since the value is just a string textContent is more suitable in this case than innerHTML.

// Cache the elements
const wheels = document.getElementById('wheels');
const demo = document.getElementById('demo');

// Add a listener to the wheels element which calls the
// handler when it changes
wheels.addEventListener('change', handleChange);

// Here `this` refers to the clicked element. If its
// checked property is `true` set the text content of
// `demo` to its value, otherwise use an empty string instead
function handleChange() {
  if (this.checked) {
    demo.textContent = this.value;
  } else {
    demo.textContent = '';
  }
}

<input type="checkbox" id="wheels" value="feature 1">
<div id="demo"></div>