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

Мне нужно показать/скрыть изображение на странице html. Я думал, что это очень просто. Но почему я получаю ошибку "видимо" undefined.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ajax Test
    </title>
    <script type="text/javascript">
<!--
    function showImage(){
        document.getElementById('loadingImage').style.visibility=visible;
    }

    -->

    </script>
    </head>
<body>
    <input type="button" value="Ajax Button" onclick="showImage();"/>
    <img id="loadingImage" src="ajax-loader.gif" style="visibility:hidden"/>

</body>

Ответ 1

Вам нужно поместить его в кавычки - это строка:

document.getElementById('loadingImage').style.visibility='visible';

Ответ 2

Я бы использовал JQuery. Загрузите его на домашней странице JQuery.

Затем включите его:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showImage(){
$("#loadingImage").toggle();
}

</script>


<img id="loadingImage" src="ajax-loader.gif" style="display:none;"/>

Ответ 3

Если другие ответы не дают вам результатов, попробуйте настроить отображение на none:

document.getElementById('loadingImage').style.display='none';

Ответ 4

Вам нужно заключить его в кавычки, иначе JavaScript думает, что вы пытаетесь установить его как значение переменной "visible". Поскольку у вас нет переменной с именем "visible", вы получаете сообщение об ошибке undefined.

document.getElementById('loadingImage').style.visibility='visible';

Ответ 5

Мне очень жаль. Это должно быть

  document.getElementById('loadingImage').style.visibility='visible';

quuotes отсутствует.