How can I toggle the visibility of a picture based on a checkbox state?-CodePudding

If the user checks the checkbox:

<input type="checkbox" value="Door"

I want to show a picture with the picture_door id. Once unchecked, I need to hide it.

I can only use HTML, CSS and JavaScript.

function myFunction() {
  var checkBox = document.getElementByValue("Door");
  var img = document.getElementById("picture_door");

  if (checkBox.checked == true){
    img.style.display = "block";
  } else {
    img.style.display = "none";
  }
}

<div>
  <input type="checkbox" value="Door" onclick="myFunction()">
</div>

CodePudding user response：

You can do something like:

let img = document.getElementById("picture_door");
let door = document.getElementById("door");

img.src = "";

function myFunction(){
  if(door.checked){
    img.src = "https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e";
  } else{
    img.src = "";
  }
}

<img src="" id="picture_door" />

<br>

<div>
  <input type="checkbox" value="Door" id="door" onclick="myFunction()">
</div>

Instead of using CSS you can also unset the src attribute of img using JavaScript to hide the image.

CodePudding user response：

There is no selector called getByElementValue. You should use getElementById

function myFunction() {
  var checkBox = document.getElementById("Door");
  var label = document.getElementById("label");
  var img = document.getElementById("picture_door");

  if (!checkBox.checked){
    img.style.display = "block";
    label.innerText = "Show"
  } else {
    img.style.display = "none";
    label.innerText = "Close"
  }
}

<input type="checkbox"  id="Door" onclick="myFunction()" >
<label for="Door" id="label"> Toogle </label>


<img id="picture_door" src="https://images.pexels.com/photos/9604813/pexels-photo-9604813.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">