在javascript/html中創建響應評級按鈕

我們在學校有一項任務來改進項目，但實際上並不知道編程語言。我們得到了項目的骨架，我們必須添加一些功能。在javascript/html中創建響應評級按鈕

骨架是一個博客，它有一個登錄/註冊/，您可以創建，編輯和刪除文章。

我的第一個想法是添加兩個按鈕 - 喜歡和不喜歡，鏈接到一個變量。點擊類似按鈕會將等級提高1，而不喜歡會降低等級。我添加了按鈕，但我正在努力與JavaScript代碼。它應該看起來像這樣：

<script> 
    var rating = 0; 

    function IncreaseRating() { 
     document.getElementById('like').value = ++rating; 
    }; 
    function DecreaseRating() { 
     document.getElementById('dislike').value = --rating; 
    }; 
</script> 
<button id="like" type="button" onclick="IncreaseRating()">Like</button> 
<button id="dislike" type="button" onclick="DecreaseRating()">Dislike</button> 
<script>document.write(rating)</script>

但它不工作。不知何故，我設法顯示評級值，但它不增加也不減少。我如何解決我的問題？

來源

2016-11-26 Dimitar Ivanov

你的問題是你只在頁面加載時輸出'rating'。你的兩個函數只會改變'rating'的值，但不會更新已經顯示的值。 – Sean

您的代碼的順序是問題，您在元素包含在DOM中之前運行腳本標記。

要修復它，只需更改順序，將腳本標記放在文檔的最底部，就在結束標記之前。

<button id="like" type="button" onclick="IncreaseRating()">Like</button> 
<button id="dislike" type="button" onclick="DecreaseRating()">Dislike</button> 
<script> 
    var rating = 0; 

    function IncreaseRating() { 
     document.getElementById('like').value = ++rating; 
    }; 
    function DecreaseRating() { 
     document.getElementById('dislike').value = --rating; 
    }; 
</script> 

<script>document.write(rating)</script>

來源

2016-11-26 21:00:18 leofontes

你有沒有試過這段代碼？作爲文件。write（）'不在任何函數內部，那麼當'rating'被改變時，什麼都不會發生，因爲它已經在頁面加載時輸出。 – Sean

問題是你在創建元素後調用腳本。與此相關的問題是，你告訴你的元素調用函數X但它不能找到它，因爲它尚未聲明（你在創建元素後立即聲明它）。

解決辦法有兩個：

使用jQuery的事件處理來處理DOM元素的事件，像這樣：$('#like').click(function() { //actions here });
或者因而與元數據放在你的本地JavaScript代碼在你的頭被加載和你的函數在頁面加載時被聲明（在你的元素被創建之前）。

https://jsfiddle.net/h6sveuju/7/

注意如何，如果你點擊你看到

負載類型

設置爲

不循環的JavaScript設置 - 在

而且你要增加這是當前字符串（像和踩），這顯然是錯誤的，因爲它會更新按鈕的文本要的只是價值的按鈕的文字評級因此留下按鈕文本，如。

來源

2016-11-26 21:30:00

代碼正在工作，但出現問題。當我刷新頁面時，評分回到零。我如何保存它？ –

那麼問題是，你想在哪裏保存價值？如果它是一個數據庫，那麼您希望在您的服務器上創建一個SQL連接並將該值加載到頁面中。當您單擊其中一個按鈕時，您將創建一個將新值保存到數據庫的請求，從而在頁面重新加載時加載該值。 –

我想將值映射到文章。每篇文章都有一個標題，內容，ID，類別和標籤，爲什麼我不能添加一個默認的評級變量0，並用腳本增加它？如果這是可能的，我該怎麼做。我在JavaScript/PHP中沒有任何知識，這使得這項任務幾乎不可能... –

在javascript/html中創建響應評級按鈕

回答

相關問題