CODEWITHSUNDEEP
javascripthtml
Reza Mazaheri
Reza Mazaheri

Reputation: 35

How to change a CSS display property with JavaScript?

I cannot change the display property of the img tag.

I have changed the display to inline or block.

function toggle_btn_img() {

  let btnId = document.getElementById("btn");
  let avatarId = document.getElementById("avatar");

  if (btnId.innerHTML === "Show!") {
    avatarId.style.display = "block";
    btnId.innerHTML = "Hide!";
  } else {
    avatarId.style.display = "none";
    btnId.innerHTML = "Show!";
  }
}
<div class="w3-display-container w3-card w3-col s4 w3-display-middle w3-light-gray" style="height: 30%;">
  <div class="w3-display-right w3-col s6 w3-display-container">
    <button id="btn" onclick="toggle_btn_img()" class="w3-btn w3-card w3-round w3-light-green w3-hover-green w3-text-white w3-text-hover-gray w3-display-middle w3-col s4">Show!</button>
  </div>
  <div class="w3-display-left w3-dispaly-container w3-col s6">
    <div id="avatar_container" class="w3-card w3-circle w3-display-middle w3-pale-blue" style="height: 150px; width: 150px;"><img id="avatar" src='http://placekitten.com/200/300' class="w3-hide w3-col s11 w3-display-middle" /></div>
  </div>
</div>

I expect the image show and hide, but it do not. (I must not change html or css file!)

Upvotes: 0

Views: 2371

Answers (4)

Reza Mazaheri
Reza Mazaheri

Reputation: 35

I solved this!

  function toggle_btn_img() {
        let btnId = document.getElementById("btn");
        let avatarId = document.getElementById("avatar");
    
        if (btnId.innerHTML.trim() === "Show!") {
            btnId.innerHTML = "Hide!";
            avatarId.style.setProperty("display", "inline-block","important");
        } else {
            btnId.innerHTML = "Show!";
            avatarId.style.setProperty("display", "none","important");
        }   
    }

Upvotes: 0

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

You have to hide it via CSS oder JS in the first place, or the first click on the button will not have any effect. Once you do that, you'll get the expected result:

let btnId = document.getElementById("btn");
let avatarId = document.getElementById("avatar");            
avatarId.style.display = "none";

function toggle_btn_img() {

    if (btnId.innerHTML === "Show!") {
        avatarId.style.display = "block";
        btnId.innerHTML = "Hide!";
    } else {
        avatarId.style.display = "none";
        btnId.innerHTML = "Show!";
    }   
}   
#avatar {
  display: none;
}
<div class="w3-display-container w3-card w3-col s4 w3-display-middle w3-light-gray" style="height: 30%;">
    <div class="w3-display-right w3-col s6 w3-display-container">
        <button id="btn" onclick="toggle_btn_img()" class="w3-btn w3-card w3-round w3-light-green w3-hover-green w3-text-white w3-text-hover-gray w3-display-middle w3-col s4">Show!</button>
    </div>
    <div class="w3-display-left w3-dispaly-container w3-col s6" >
        <div id="avatar_container" class="w3-card w3-circle w3-display-middle w3-pale-blue" style="height: 150px; width: 150px;"><img id="avatar" src='//placekitten.com/200/300' class="w3-hide w3-col s11 w3-display-middle"/></div>
    </div>
</div>

Upvotes: 2

Jakir Hossen
Jakir Hossen

Reputation: 461

I think your code is correct. Just presentation error. 

<button id="btn" onclick="toggle_btn_img()" class="w3-btn w3-card w3-round w3-light-green w3-hover-green w3-text-white w3-text-hover-gray w3-display-middle w3-col s4">Hide!</button>

I changed Show! => Hide! (button text)

Upvotes: 0

Atik Hashmee
Atik Hashmee

Reputation: 393

just add image to display none at first

<img style="display:none" src="imgae.jpeg" />

Upvotes: 1

Related Questions