Vanilla JavaScript examples

edit_onclick.html

<style>
    #meuCampo {
        border: 1px solid;
    }
</style>

<div id="meuCampo">Lorem</div>
<input name="meuCampo" type="text" />

<script>
    // Ao clicar em meuCampo trocar o valor

   function addEventHandler(elem, eventType, handler) {
        if (elem.addEventListener)
            elem.addEventListener (eventType, handler, false);
        else if (elem.attachEvent)
            elem.attachEvent ('on' + eventType, handler); 
    }

    addEventHandler(document, 'DOMContentLoaded', function() {
        addEventHandler(document.getElementById('meuCampo'), 'click', function() {
            if (this.innerHTML === 'M') {
               this.innerHTML = 'F'
               document.getElementsByName("meuCampo")[0].value = 'F'
            } else if (this.innerHTML === 'F') {
               this.innerHTML = 'X'
               document.getElementsByName("meuCampo")[0].value = 'X'
            } else {
               this.innerHTML = 'M'
               document.getElementsByName("meuCampo")[0].value = 'M'
            }
        });
    });

</script>