Использовать тег вывода html5 для отображения переменных javascript?

Извините, если это глупый вопрос, но я пытался использовать AJAX для отображения переменных javascript в режиме реального времени с небольшой удачей. Я определенно новичок, хотя это может быть проблемой. haha- Когда я вижу код AJAX, всегда кажется, что требуется дополнительный URL-адрес, который он обновляет, но я просто хочу обновить переменные javascript при щелчке.

http://jsfiddle.net/bagelpirate/m9Pm2/

<div id="div_1">
 One:  | 
 Two:  | 
 Three: 
</div>

<div id="div_2">

 

 

  

</div>

Как вы можете видеть в приведенном выше коде, когда пользователь нажимает на одно из изображений, я хочу увеличить счетчик и отобразить его в верхней части страницы. Я нашел выходной тег HTML5 и задавался вопросом, можно ли использовать его для отображения переменной javascript в режиме реального времени? Все, что я читал, кажется, подразумевает, что это невозможно, потому что выходной тег работает только на формах? Во всяком случае, я подумал, что это не помешает спросить!

Спасибо за ваше время!

2 ответа

Вы не должны использовать document.write для записи в DOM после завершения загрузки. Вы отметили свой вопрос с помощью jQuery, поэтому я предполагаю, что вы можете использовать его для обновления. Вместо этого обновите DOM из своего блока сценариев. Вот пример, который может помочь вам приступить к работе.

http://jsfiddle.net/prxBb/

<div id="div_1">
 One:  | 
 Two:  | 
 Three: 
</div>

<div id="div_2">





 

</div>


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

var varContainer = {
 one:0,
 two:0,
 three:0
};
jQuery("#div_2 img").on('click',function(){
 jQuery.each(varContainer,function(key,value){
 //Add key + value to the DOM
 if(jQuery("."+key+value).length<1)
 jQuery("#div_2").append("");
 var newHtmlVal= "<p><code>&lt;span&gt;Var name: "+key+"&lt;/span&gt;&lt;span&gt;Value: "+value+"&lt;/span&gt;";
 jQuery("."+key+value).html();
 });
});</code> </p><p> HTML</p> 

 <p> Конечно, скрипт может быть обновлен, чтобы просмотреть каждую переменную recursivley в случае вложенных объектов/массивов...</p> <p> Надеюсь это поможет!</p>

licensed under cc by-sa 3.0 with attribution.