I have a play/pause button and I want to check whether its text is "Play" or "Pause" when the user clicks on it.

window.PlayPauseButton = document.getElementById("PlayPauseButton");

PlayPauseButton.onclick = function()  //when you click the play or pause button
{
    if( window.PlayPauseButton.innerHTML == "Pause" )
    {
        window.PlayPauseButton.innerHTML = "Play";
        clearInterval( window.TheTimer );
    }
    else
    {
        window.PlayPauseButton.innerHTML = "Pause";
    }
};

But it doesn't work! I can't pare innerHTML with a string.

I have a play/pause button and I want to check whether its text is "Play" or "Pause" when the user clicks on it.

window.PlayPauseButton = document.getElementById("PlayPauseButton");

PlayPauseButton.onclick = function()  //when you click the play or pause button
{
    if( window.PlayPauseButton.innerHTML == "Pause" )
    {
        window.PlayPauseButton.innerHTML = "Play";
        clearInterval( window.TheTimer );
    }
    else
    {
        window.PlayPauseButton.innerHTML = "Pause";
    }
};

But it doesn't work! I can't pare innerHTML with a string.

• javascript
• jquery
• html

Share Follow edited Feb 7, 2022 at 14:13 Adil Hussain 32.3k2323 gold badges125125 silver badges166166 bronze badges asked Jun 2, 2016 at 23:45 BenBen 10311 gold badge33 silver badges88 bronze badges 1

• innerHTML is a string value and pares to strings quite nicely. However, you have not included the HTML nor the error message, so all someone can do is guess. "It doesn't work" is the worst description of a bug -- you should always say exactly WHAT isn't happening. – Jeremy J Starcher Commented Jun 2, 2016 at 23:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need to check with innerText, not innerHTML

PlayPauseButton.onclick = function()  //when you click the play or pause button
{
    if( window.PlayPauseButton.innerText== "Pause" )
    {
        window.PlayPauseButton.innerText= "Play";
        clearInterval( window.TheTimer );
    }
    else
    {
        window.PlayPauseButton.innerText= "Pause";
    }
};

If you're using a button tag, try using innerText instead:

if (window.PlayPauseButton.innerText == "Pause" ){
    window.PlayPauseButton.innerHTML = "Play";
    clearInterval( window.TheTimer );
}
else  {
    window.PlayPauseButton.innerHTML = "Pause";
}

This will only work if you're using <button>Play</button>.

If you're using an <input type="button"> you're going to need to pare the value instead of innerText.