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