How to use checkbox to activate image ALT atribute to show on the image?-CodePudding

I need to make a function when I click on check box I can can see image name (Alt="bla bla") when mouse hovered on the picture. I apreciate the help!

Js -

function show(){
  var images = document.querySelectorAll('gr');
  var elem = document.getElementById('chb');

  images.forEach(function(image) {
  image.addEventListener('click', function() {
    elem.innerHTML = image.getAttribute('alt');
    });
  });
}

 
<div  id="gr">

<img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_jõgi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;">
     
<img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;">

<img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;">

<img src="https://images.assettype.com/fortuneindia/2020-06/ef53f9be-f257-4aa3-9af5-6ca1a9f33a86/close_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;">

</div>

            
<div >
    <label for="checkb"> <b>Rodyti aprasyma:</b> </label>
    <input type="checkbox" id="chb" onclick="show()" />
</div>

Can anyone help this out? :)

CodePudding user response：

let chb = document.getElementById('chb');
let images = document.querySelectorAll('img');

chb.addEventListener('change', function(e) {
  if (e.target.checked) {
    // set alts as titles
    images.forEach(function(image) {
      image.setAttribute('title', image.getAttribute('alt'))
    });

  } else {
    // remove the titles
    images.forEach(function(image) {
      image.setAttribute('title', '')
    });

  }
})

<div  id="gr">

  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_jõgi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;">

  <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;">

  <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;">

  <img src="https://images.assettype.com/fortuneindia/2020-06/ef53f9be-f257-4aa3-9af5-6ca1a9f33a86/close_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;">

</div>


<div >
  <label for="checkb"> <b>Rodyti aprasyma:</b> </label>
  <input type="checkbox" id="chb" />
</div>

CodePudding user response：

Several issues

gr is the ID of the container, not the tagname of the images
an image or a checkbox does not have innerHTML
I use delegation so we do not have to have an eventListener for each image

Here is what I think you wanted to do

window.addEventListener("DOMContentLoaded", function() {
  const container = document.getElementById('gr');
  const chb = document.getElementById('chb');

  container.addEventListener('mouseover', function(e) {
    const tgt = e.target; 
    if (tgt.tagName === "IMG")
      tgt.setAttribute("title",chb.checked ? tgt.getAttribute('alt') : "");
  });
});

<div  id="gr">

  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_jõgi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;">

  <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;">

  <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;">

  <img src="https://images.assettype.com/fortuneindia/2020-06/ef53f9be-f257-4aa3-9af5-6ca1a9f33a86/close_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;">

</div>


<div >
  <label for="checkb"> <b>Rodyti aprasyma:</b> </label>
  <input type="checkbox" id="chb" />
</div>

CodePudding user response：

You have a few issues with your code. If you want to show the alt name when hovering over the images you need a different mouse event. Also, you need to have a separate HTML element to display the alt name.

I hope this helps.

function show() {
  var images = document.querySelectorAll("img");
  var elem = document.getElementById("chb-label");

  images.forEach(function(image) {
    image.addEventListener("mouseenter", function(e) {
      elem.innerHTML = e.target.alt;
      console.log("epa", e.target.alt);
    });
  });
}

<div  id="gr">

  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Altja_jõgi_Lahemaal.jpg" alt=MiskoUpe style="width:170px;height: 120px;margin: 0px 40px;">

  <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=" alt=Kalnai style="width:180px;height: 122px; margin: 0px 40px;">

  <img src="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" alt=KalnaiIrEzeras style="width:190px;height: 120px; margin: 0px 40px;">

  <img src="https://images.assettype.com/fortuneindia/2020-06/ef53f9be-f257-4aa3-9af5-6ca1a9f33a86/close_up_photography_of_leaves_with_droplets_807598.jpg?rect=0,607,4128,2322&w=1250&q=60" alt=Lapai style="width:170px;height: 120px; margin: 0px 40px;">

</div>

<div >
  <label for="checkb"> <b>Rodyti aprasyma:</b> </label>
  <input type="checkbox" id="chb" onclick="show()" />
  <span id="chb-label"></span>
</div>