Give Logout url after changing name from Login to Logout

Question

Once we click on "Login" button present in pop up, we want to change text "Login" to "Logout" present on top menu.

So i tried as CodePen , now i can able to change text from "Login" to "Logout" , along with this i want to give Logout url : <url helper="customer/getLogoutUrl"/> , is this possible ?

Login1 - pop up : app/design/frontend/rwd/Theme1/template/productlike - index.phtml

<form>
<input onclick="change();" type="submit" value="Login1"  />
</form>

script

function change() {
    var elem = document.getElementById("delUserButton")
    if (elem.value === "Login2")
        elem.value = "Logout";
    else
        elem.value = "Login2";
}

Login in top menu [Login2] - app/design/frontend/rwd/Theme1/layout - customer.xml

<customer_logged_out>
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer">
            <label>             
            <![CDATA[<p><input  type="button" id="delUserButton"  value="Login2" /></p>]]>
            </label>
            <url helper="customer/getLoginUrl"/><title>Log In</title>       
            <prepare/><urlParams/><position>100</position></action>
        </reference>
        <remove name="reorder"></remove>
</customer_logged_out>

Answer 1

I need to do more research before posting question , below code will make the trick :

<![CDATA[<p><a href="customer/account/logout"><input  type="button" id="delUserButton"  value="Login2" /></a></p>]]>