HTML система увеличения голосов

Question

Я довольно новичок в html, я пытаюсь показать значение на моей веб-странице, которое увеличивается при нажатии кнопки.

Вот мой код

<script type ="text/javascript"> 
    var likesSD = 0; 
    var dislikesSD= 0; 
</script> 
    <button class="like" onclick="likes++">I like!</button> 
<script>document.write(likesSD);</script> 

значение на экране не меняется, когда кнопка нажата. Есть ли способ, которым я могу это сделать, без использования базы данных.

Answer 1

Вы можете сделать это:

<div id="likes"></div> 

<script type ="text/javascript"> 
    var likes = 0; 

    function IncreaseLikes() 
    { 
     likes++; 
     document.getElementById("likes").innerHTML = likes; 
    } 
</script> 

<input type="button" class="like" onclick="IncreaseLikes()" value="I like!" /> 

• Используйте некоторый элемент для хранения значения, это не хорошо использовать document.write();
• Я изменил вашу кнопку на input type="button";
• В любой базе данных информация будет потеряна при обновлении страницы. Вы можете использовать localStorage (поддерживается во всех современных браузерах), чтобы сохранить сохраненное значение, но только в браузере. Все еще недействительно для реального пула голосования.

Answer 2

Вы должны определить функцию, которая увеличивает ваш счетчик like/dislike, а затем записывает его в документ. Затем отобразить эту функцию на OnClick событие вашей кнопки:

<script type ="text/javascript"> 
    var likesSD = 0; 
    var dislikesSD= 0; 

    function like() { 
     likesSD++; 
     document.getElementById("likes").innerHTML = likesSD; 
    } 
</script> 
    <button class="like" onclick="like()">I like!</button> 
    <div id="likes"></div>