2016-12-05 3 views
-1

У меня есть код JavaScript для подсчета щелчков на кнопках. Но при перезагрузке страницы счетчик устанавливается на ноль.Функция Javascript для подсчета нажатием кнопки?

Есть ли какое-либо решение для подсчета щелчков на кнопках, а также сохранение этого значения переменной при перезагрузке страницы?

var count = 0; 
 
var button = document.getElementById("countButton"); 
 
var display = document.getElementById("displayCount"); 
 
// Line commented out as SO does not allow it 
 
// window.localStorage.setItem("on_load_counter", count); 
 
button.onclick = function() { 
 
    count++; 
 
    display.innerHTML = count; 
 
}
<input type="button" value="Count" id="countButton" /> 
 
<p>The button was pressed <span id="displayCount">0</span> times.</p>

+2

Используйте [Web Storage API] (https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) – Satpal

+1

вы можете сохранить счетчик в печенье или в хранилище HTML5 \ –

+1

Используйте сессионное хранилище или локальное хранилище для этого Satpal правильно – Jigar7521

ответ

0

Это все U нужно: D

var count = localStorage.on_load_counter || 0; 
    var button = document.getElementById("countButton"); 
    var display = document.getElementById("displayCount"); 

    button.onclick = function(){ 
    localStorage.on_load_counter = display.innerHTML = ++count; 
    } 
0

Используйте переменную localStorage.clickcount, что вы можете увеличивать с каждым щелчком.

Смотреть это jsfiddle

-1

Заплатанный его с некоторыми из моих DataSave API, и это работает, здесь вы идете!

<body onload="loadStats();"> 
<input type="button" value="Count" id="countButton" /> 
<p>The button was pressed <span id="displayCount">0</span> times.</p> 

<script type="text/javascript"> 
var count = 0; 
var button = document.getElementById("countButton"); 
var display = document.getElementById("displayCount"); 
function loadStats(){ 
if(window.localStorage.getItem('count')){ 
count = window.localStorage.getItem('count') 
display.innerHTML = count; 
} else { 
window.localStorage.setItem('count', 0) 
} //Checks if data has been saved before so Count value doesnt become null. 
} 
window.localStorage.setItem("on_load_counter", count); 
button.onclick = function(){ 
count++; 
window.localStorage.setItem("count", count) 
display.innerHTML = count; 
} 
</script> 
</body> 
+0

Hii этот код работает сейчас. Но теперь проблема в том, что он работает неправильно в моем блоге. Средства на другом счетчике ПК снова начинаются с нуля. Я хочу получить доступ к этому в своем блоге. –

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