How to change a CSS display property with JavaScript?

Question

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!)

Your code works, but only if you click the button at least twice. That's because there is no inline style attribute in your img tag yet that could be read by JS. — CodeF0x
– CodeF0x, Commented Apr 8, 2019 at 8:58

Sarah Groß · Accepted Answer · 2019-04-08 11:12:29Z

2

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>

edited Apr 8, 2019 at 11:12

answered Apr 8, 2019 at 8:58

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Reza Mazaheri Over a year ago

But css file is unchangeable!

Sarah Groß Over a year ago

Then simply hide the image via JS. Updated my code.

Reza Mazaheri Over a year ago

did you declare variables outside of function?! my problem is not solved!

Sarah Groß Over a year ago

Yes, I moved them outside so you can hide the image on page load. Why is your problem not solved?

Atik Hashmee · Accepted Answer · 2019-04-08 08:59:17Z

1

just add image to display none at first

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

answered Apr 8, 2019 at 8:59

Atik Hashmee

3933 silver badges13 bronze badges

1 Comment

Reza Mazaheri Over a year ago

all changes must be in JavaScript file!

Jakir Hossen · Accepted Answer · 2019-04-08 09:00:13Z

0

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)

answered Apr 8, 2019 at 9:00

Jakir Hossen

4614 silver badges13 bronze badges

2 Comments

Reza Mazaheri Over a year ago

only JavaScript file is changeable.

Jakir Hossen Over a year ago

then first execute this => btnId.innerHTML = "Hide!";

Reza Mazaheri · Accepted Answer · 2021-03-07 11:34:11Z

0

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");
        }   
    }

answered Mar 7, 2021 at 11:34

Reza Mazaheri

3511 bronze badges

Collectives™ on Stack Overflow

How to change a CSS display property with JavaScript?

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related