How to merge 2 button in HTML/Javascript? – Blancer.com Tutorials and projects

Hi all I have a simple example in which I have two separated button, as I am showing in the code. I would like to create 1 single Button. Initially is the “Multiply Button” and after having clicked on it, it becomes the “Refresh page button” and once I clicked it go back to “multiply” and so on in a loop. Someone has an idea of How I put together the two button? (each button activate a function which correspond to the name of the button.

<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" onClick="multiplyBy()" Value="Multiply" />
</form>

    <foreignObject id="specificityObject" x="6" y="7" width="80" height="80">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <p>
                <span style="font-size:27px" id = "result"  ></span>
            </p>
        </div>
    </foreignObject>

    <foreignObject id="specificityObject" x="780" y="830" width="100" height="100">
            <div xmlns="http://www.w3.org/1999/xhtml">
                    <button onClick="window.location.reload();">Refresh Page</button>
            </div>
    </foreignObject>

</body>

<script>
    function multiplyBy()
{
        var num1 = document.getElementById("firstNumber").value;
        var num2 = document.getElementById("secondNumber").value;
        num3 = var num1 * var num2;
        document.getElementById("result").innerHTML = num3;
}

function reload() {
    reload = location.reload();
}
// Event listeners for reload
reloadButton.addEventListener("click", reload, false);

</script>

</html>