2014-07-03 4 views
1

Я вроде как новичок в HTML/Javascript, и я пытаюсь понять, как это сделать, когда я нажимаю кнопку, изображение загружается. Это все, что я могу придумать, но опять же я очень плохо отношусь к этому материалу, и я все еще хорошо разбираюсь в .Как загрузить изображение при нажатии кнопки?

<html> 
<div style="visibility:invisible" id="theTrick"> 
<img id="myImage" src="https://minecraft.net/images/logo.png" alt="Test"> 
</div> 
<button type="button" onclick="myFunction">Click for the Minecraft Logo</button> 
<script> 
function myFunction() { 

    document.getElementById="theTrick".style = "visibility:initial" 

} 
</script> 
</html> 

EDIT

Я решил эту проблему, и с тех пор узнал гораздо больше, осваивая HTML и CSS, а теперь на произведениях JavaScript. У меня есть вопрос, хотя и добавить к этому; есть ли способ, чтобы изображение исчезло с другого щелчка, затем снова появится следующий клик и так далее?

ответ

2

Несколько вещей:

  1. Это visibility: hidden, не visibility: invisible.
  2. Это myFunction(), а не myFunction.
  3. Это document.getElementById("theTrick"), а не document.getElementById = "theTrick".
  4. Это visibility: visible, а не visibility: initial (начальная видимость - hidden, которую вы установили вверху).

Вы можете найти this document на CSS visibility недвижимость полезная.

Demo

+2

Там также некоторая вспомогательная документация, которая могла бы помочь [здесь] (http://www.w3schools.com/js/js_htmldom_css.asp). –

+0

Спасибо, и могу ли я получить демоверсию о том, как я могу снова нажать кнопку, чтобы сбросить ее? –

+0

@ user3799724 Просто отмените все атрибуты стиля для своих «видимых» коллег. Вы также можете посмотреть функцию [jQuery 'hide'] (http://api.jquery.com/hide). – AstroCB

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