在實際的HTML按鈕上顯示計數器

Question

我有一個「喜歡」按鈕;並在按鈕下面，我可以顯示'喜歡計數'。

但是，我想'喜歡計數'值顯示在實際的按鈕本身。例如，我希望按鈕說：「Like 5」

如何在按鈕上顯示文本和變量值？

Answer 1

也許你可以用這個代碼改進我所做的。

HTML

<form id = "form" method = "POST"> 
    <input type = "submit" value = "Like" /> 
</form> 

<br /> 

<div id = "clicks"> 
    counter = <label id = "count">0</label> clicks ! 
</div> 

JS

function CountOnFormSubmitEvent(form_id, _callback_) 
{ 
    var that = this, count = 0, callback = _callback_; 

    var form = document.getElementById(form_id); 
    if(form === null) { return null; } 

    var reset = function(){ 
     count = 0; 
    }; 

    form.addEventListener("submit", function(evt){ 
     callback(evt, ++count, reset); 
    }, false); 
} 

//Reseting Process You can delete if you dont want it. 
var counter = new CountOnFormSubmitEvent("form", function(event, count, reset_callback){ 
    event.preventDefault(); 
    if(count >= 10) 
    { 
     alert("Reseting the process"); 
     reset_callback(); 
    } 
    document.getElementById("count").innerHTML = count; 
}); 

這裏是鏈接的jsfiddle。

DEMO JSFIDDLE