Показать/скрыть элемент при нажатии кнопок

-1

У меня есть две кнопки Показать и скрыть, и у меня есть изображение, поэтому я хочу знать, когда я нажму кнопку скрыть, img исчезнет, и когда я нажму кнопку «Показать», он снова появится. И я не хочу делать это с помощью CSS или JQUERY только Javascript. Если кто-то может помочь, спасибо большое.Показать/скрыть элемент при нажатии кнопок

источник

2015-07-14 Endrit Shala

window.onload = function(){ 
 
    var myImg = document.getElementById('myImg'); 
 
    
 
    document.getElementById('hideBtn').onclick = function(){ 
 
     myImg.style.display = 'none'; 
 
    }; 
 
    
 
    document.getElementById('showBtn').onclick = function(){ 
 
     myImg.style.display = ''; 
 
    }; 
 
    
 
    document.getElementById('toggleBtn').onclick = function(){ 
 
     var display = getComputedStyle(myImg).display=='none'?'':'none'; 
 
     myImg.style.display = display; 
 
    }; 
 
}

<button id="hideBtn">Hide</button> 
 
<button id="showBtn">Show</button> 
 
<button id="toggleBtn">Toggle</button> 
 
<br/> 
 
<img id="myImg" src="http://www.eastcottvets.co.uk/uploads/Animals/gingerkitten.jpg" alt="" />

источник

2015-07-14 14:10:02 blex

Спасибо за ответ. Просто то, что я искал, хотя мне не нужно было писать, но больше информации лучше, потому что я новичок в javascript, поэтому мне больше информации, и еще раз спасибо большое. –

жаль беспокоить вас, но что, если у нас есть 5 списков, и в этих 5 списках мы имеем 2 кнопки Show/Hide и 1 img. Как мы можем сделать это для всех списков, которые img может показывать и скрывать? –

@EndritShala Поскольку идентификаторы должны быть уникальными, вы можете использовать классы вместо этого и выполните следующее: http://jsfiddle.net/shjg4vf9/ – blex

function show(){ 
 
    document.getElementById('image').style.display = "inline"; 
 
    } 
 

 
function hide(){ 
 
    document.getElementById('image').style.display = "none"; 
 
    }

<img src="http://colorvisiontesting.com/images/plate%20with%205.jpg" width="80px" height="80px" id="image"/><br /> 
 
<button onClick="hide();">Hide</button> 
 
<button onClick="show();">Show</button>

источник

2015-07-14 14:12:59 Keerthi

Показать/скрыть элемент при нажатии кнопок

ответ

Смежные вопросы