Making a value/ordinary text, clickable and changeable

Question

This .js code below gives out the view that is visible on the picture attached. As you can probably make out of the code, depending on the value of the array (1 or 0 ) The shown value is "yes" or "no".

I'm having trouble figuring out how to make this "yes" or "no" value clickable in a sense that it changes from Yes to No.

if(y.email.contact_email == 1){
    contact = "<td class='value'><span style='color: green'>Yes</span></td>";
}

else
{
    contact = "<td class='value'><span style='color: red'>No</span></td>";
}

content += "<tr class='odd'><td class='key'>Contact </br> e-mail</td><td class='value'>"+contact+"</td></tr>";

if(y.email.login_email == 1){
    login = "<td class='value'><span style='color: green'>Yes</span></td>";
}

else
{
    login = "<td class='value'><span style='color: red'>No</span></td>";
}

content += "<tr class='even'><td class='key'>Users login </br> e-mail</td><td class='value'>"+login+"</td></tr>";

Answer 1

Try this:

$('td.value span').click(function() {
    $(this).text( $(this).text() == 'Yes' ? 'No' : 'Yes' );
});

Answer 2

Using divs you could try :

<script type="text/javascript">
    function toggle(linkid) {
        var toggleLink = document.getElementById(linkid);
        if (toggleLink.innerHTML == 'No') {
            toggleLink.innerHTML = 'Yes';
        }
        else {
            toggleLink.innerHTML = 'No';
        }
    }
</script>

<a id="yesNo" onclick="toggle(this.id);" href="#">Yes</a>

If you need to store these values back to another script or db then simply create a hidden form field and update the value of the hidden field within the toggle function above (e.g. document.getElementById( 'hiddenField' ).value = "0" )

Dave