document.getElementById('cleardisplay').style.display = 'none'; window.doShit = function () { document.getElementById('updates').innerHTML += ' shit was done'; document.getElementById('cleardisplay').style.display = 'block'; }; window.doKeyboardShit = function () { document.getElementById('updates').innerHTML += ' keyboard shit was done'; document.getElementById('cleardisplay').style.display = 'block'; }; window.doClear = function () { document.getElementById('updates').innerHTML = ''; document.getElementById('cleardisplay').style.display = 'none'; };
<p>Mouse only clickable span <span onclick="doShit();">Click Me (with a mouse)</span></p> <p>Mouse and keyboard clickable span <span onclick="doShit();" tabindex="0" role="button" onkeypress="doKeyboardShit();">Click Me</span></p> <p>Double-clicking mouse and keyboard button <button onclick="doShit();" onkeypress="doKeyboardShit();">Click Me</button></p> <p>Proper mouse and keyboard button <button onclick="doShit();">Click Me</button></p> <div role="alert" id="updates"></div> <button onclick="doClear();" id="cleardisplay">Clear</button>
span, button { padding:3px; background-color:lightgrey; border-radius:5px; border: 1px solid black; } button { font-family:Times; font-size:16px; } button:active, span:active { background-color:grey; }