Как мне обновить div с одним кликом на изображении?

Question

Я искал, но не могу понять, потому что никто не объясняет. Вот что я хочу сделать: я хочу обновить div без перезагрузки всей страницы. Вот так.

 <div id="topimage">
 <span id="happysmile"><img alt="happysmile" src="happysmile.png"></a></span>
 <span id="refreshbuttn"><img alt="refreshbuttn" src="refreshbuttn.png"></a></span>
                </div>

<div id="topDatum"><script type="text/javascript">
var mynewdate = new Date();
document.write(mynewdate.getMilliseconds());
</script></div>

Так что я просто хочу перезагрузить div "sec", а не topimage div. просто нажав на кнопку refreshbuttn.png.

Возможно ли это, и как ты это делаешь?

Спасибо, и извините за мой плохой английский.

Answer 1

Если под "sec" div вы подразумеваете div "topDatum", вы можете сделать это:

Пример: http://jsfiddle.net/YCM9m/1/

<div id="topimage">
    <span id="happysmile"><img alt="happysmile" src="happysmile.png"></span>
    <span id="refreshbuttn"><img alt="refreshbuttn" src="refreshbuttn.png"></span>
</div>

<div id="topDatum"></div>

<script type="text/javascript">
    document.getElementById('refreshbuttn').onclick = function() {
        var mynewdate = new Date();
        document.getElementById('topDatum').innerHTML = mynewdate.getMilliseconds();
    }
</script>

Используется document.getElementById для получения элемента с идентификатором refreshbuttn. Это дает ему обработчик onclick, который создает объект даты, получает элемент с идентификатором topDatum и устанавливает его innerHTML в значение mynewdate.getMilliseconds().

Answer 2

Это может помочь вам начать: http://jsbin.com/iwebo4/edit. Вот часть JavaScript:

function updateMilliseconds() {
  if (document.getElementById('hello')) {
    document.getElementById('hello').innerHTML
      = new Date().getMilliseconds();
  }
}

updateMilliseconds();​

Answer 3

Если вы используете jQuery, вы можете использовать следующее:

$("#refreshbuttn").click(function(){
    var mynewdate = new Date();
    $("#topDatum").html(mynewdate.getMilliseconds());
});

Будет прослушивать объект с ID refreshbuttn за клики (в данном случае объект является диапазоном refreshbuttn) .
Когда это будет, он получит новую дату.
Затем он установит HTML объекта с ID topDatum в новые миллисекунды (в данном случае объект является topDatum DIV) .

Демо здесь