仅使用Javascript / HTML单击时如何更改按钮的文本和颜色

Question

I need to be able to change the a button color and text to something other than the default.

<button id="partyTimeButton">Party Time!</button>

JS

var partyEvent = function()
{
    if (partyBtn < 0) 
    {
        partyBtn = new Date().getHours(); 
        partyBtn = "Party Over";

      // text in the button should read "Party Over"
        // color of the button should be "#0A8DAB" (bonus!)
    }

    else
    {
        partyBtn = -1;
        partyBtn = "PARTY TIME!"; 
        // text in the button should read "PARTY TIME!"
        // color of the button should be "#222" (bonus!)
    }
};

partyBtn.addEventListener("click", partyEvent);

Answer 1

Your code snippet has some issues with the way you defined variables and text. PartyBtn is updated as -1 and "Party time!" and as hours number and "Party Over" , one after the other, which I think, shouldn't be.

Updated the snippet with some formatting and variables declarations. Hope this should get you going.

 var partyBtn = document.querySelector("#partyTimeButton"); var partyBtnCount = -1; var partyEvent = function() { console.log(partyBtnCount); if (partyBtnCount < 0) { partyBtnCount = new Date().getHours(); partyBtn.innerHTML = "Party Over"; partyBtn.style.color = "#0A8DAB" // text in the button should read "Party Over" // color of the button should be "#0A8DAB" (bonus!) } else { partyBtnCount = -1; partyBtn.innerHTML = "PARTY TIME!"; partyBtn.style.color = "" // text in the button should read "PARTY TIME!" // color of the button should be "#222" (bonus!) } }; partyBtn.addEventListener("click", partyEvent); 

 <button id="partyTimeButton">Party Time!</button>