Display image with checkbox

JavaScript
1

I want to use checkbox to display image base on the type of image that has been checked. i try to do that but the image is not displaying. i don’t know what i am doing wrong.

type or paste code here
<div id="container">

    <img id="dolphin1" class="dolphin" src="../images/dolphins/image1.png" alt="dolphin 1" title="dolphin 1">
    <img id="dolphin2" class="dolphin" src="../images/dolphins/image2.png" alt="dolphin 2" title="dolphin 2">
    <img id="dolphin3" class="dolphin" src="../images/dolphins/image3.png" alt="dolphin 3" title="dolphin 3">
</div>



<div id="toggle-components">
    <fieldset>
        <legend>Choose dolphin(s) to display</legend>
        <input type="checkbox" id="check-option1" checked="checked"><label for="check-dolphin1">diving down</label>
        <input type="checkbox" id="check-option8"  onclick="if(this.checked){displaybgimage()}")><label for="check-dolphin8">jumping up</label>
        <input type="checkbox" id="check-option5"><label for="check-dolphin5">take off</label>
        <input type="checkbox" id="check-option3"><label for="check-dolphin3">jumping together</label>

    </fieldset>
</div>

function displaybgimage() {
    var img1=document.getElementById("check-option8");
    var bg = document.getElementById("container");
    var dolphin1=document.getElementById("dolphin2");
    if(img1.checked){
        bg.innerHTML=dolphin1;
    }


}
2

I have updated my function but the image is still not displayed i want to display the image in “bg” container. I a not sure what I am doing wrong.

function displaybgimage() {
     var image=document.getElementsByTagName("img");
     var src0=image[2].getAttribute("src");
     var img1=document.getElementById("check-option8");
    var bg = document.getElementById("container");
    var dolphin1=document.getElementById("dolphin2");
    if(img1.checked){
        bg.src=src0;
    }


}
3

hey can just add your project in a glitch , does it showing any error?

4

It’s basically all CSS.

I just used JS to make the html.

https://jsfiddle.net/zvu6jfxs/

<div id="site_container"></div>

ul {
  list-style: none;
}

li label {
  display: flex;
}

img {
  display: none;
}

input[type="checkbox"]:checked + img {
  display: block;
}


const initApp = () => {
  const images = ['img1', 'img2', 'img3', 'img4'];
  const $ul = createElement('ul');

  images.forEach((img) => {
    $ul.append(addCheckboxesAndImages(img));
  });
  
  const $siteContainer = getElement('#site_container');
  $siteContainer.append($ul);
};

const addCheckboxesAndImages = (img) => {
  const $li = createElement('li');
  const $label = createElement('label');
  const $input = createElement('input');
  const $img = createElement('img');

  $input.setAttribute('type', 'checkbox');
  $img.setAttribute('src', img);
  $img.setAttribute('alt', img);

  $label.append($input);
  $label.append($img);
  $li.append($label);
  
  return $li;
};

const createElement = (tag) => document.createElement(tag);
const getElement = (element) => document.querySelector(element);

initApp();