A button dynamic links to an image

Question

I am trying to hide/show dynamically an image through JavaScript, but i can't figure out how to do that. I have the following:

let button = document.querySelector('#button');
let msg = document.querySelector('#image');

button.addEventListener('click', ()=>{
  msg.classList.toggle('show');
})

#button{
  width: 200px;
  text-align: center;
  padding: 10px;
  font-size: 30px;
  cursor: pointer;
  margin: auto;
 
}
.hide{
  visibility: hidden;
}
.show{
  visibility: visible;
}

<div id="image" class="hide">
    <img class="screenshot" width="238" height="222" src="https://picsum.photos/200" alt="screenshot"  />
</div>
<div id="button">
    Click!
</div>

I think that the src="https://picsum.photos/200" must be implemented in the JS page, not in the HTML page.

I don't understand the exact problem - your code already works for me. Could you please give more details? — majusebetter, Oct 09 '21 at 14:58
It must be dynamically. Button on HTML page and src=" on JS page. — Per, Oct 09 '21 at 15:18
So what you want to do is change the `src` attribute of your element. Have you tried that? — malifa, Oct 09 '21 at 15:26
Does this answer your question? [Programmatically change the src of an img tag](https://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) — malifa, Oct 09 '21 at 15:27
HTML page must not have element in the body of it. I must to dynamically create the element from JavaScript, inject it into the DOM and also attach event handlers to the dynamically created elements. — Per, Oct 09 '21 at 17:21

score 0 · Answer 1 · edited Oct 10 '21 at 10:52

 <div id="image" class="show">
  <img
    class="screenshot"
    width="238"
    height="222"
    src="https://picsum.photos/200"
    alt="screenshot"
  />
</div>

let button = document.querySelector("#button"); let msg = document.querySelector("#image");

  button.addEventListener("click", () => {
    // msg.classList.toggle("show");
    if(msg.className==="show"){
        msg.className= "hide"
    }else{
        msg.className= "show"

    }

  });

New JS page. No need to add anything to the HTML page. It remains empty. But I still can't hide/show the image with the button provided.

let newPhoto = document.createElement('div')

 newPhoto.classList.add('photo')

 const myImage = document.createElement('img')
 myImage.src=src="https://picsum.photos/200" ;
 myImage.alt='Art photo'

 


 const button = document.createElement('button')
 button.classList.add('btn')
 button.textContent= 'Click! '

 document.body.appendChild(newPhoto)
 newPhoto.appendChild(myImage)
 
 newPhoto.appendChild(button)

// Adding event handlers

 function showMore(){
   document.querySelector('.moreInfo').style.display ='block'
}

document.querySelector('.btn').addEventListener('click', showMore)

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Muhammedogz, Oct 09 '21 at 16:44

Lawrence Cherone · Answer 2 · 2021-10-09T15:46:35.350

If you want to change src you need to select the image. You can then get to the parent from there to change the class.

Don't use id="" if you want multiple things.

Is a bit unclear what you mean by dynamic, I'm presuming you mean having multiple buttons which show different images. If so then use a data attribute on the button, much like you would if it was a link.

let screenshot = document.querySelector('.screenshot')
let buttons = document.querySelectorAll('.button')

buttons.forEach(button => button.addEventListener('click', event => {
  screenshot.src = event.target.dataset.image

  screenshot.parentElement.className = 'show'
}))

.button {
  width: 200px;
  text-align: center;
  padding: 10px;
  font-size: 30px;
  cursor: pointer;
  margin: auto;
}

.hide {
  display: none;
}

.show {
  display: block;
}

<div class="hide">
  <img class="screenshot" width="300" height="200" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNcWg8AAc8BJpg2zxQAAAAASUVORK5CYII=" alt="screenshot" />
</div>

<div class="button" data-image="https://picsum.photos/id/1/300/200">
  Click! (1)
</div>

<div class="button" data-image="https://picsum.photos/id/2/300/200">
  Click! (2)
</div>

A button dynamic links to an image

2 Answers2