JSFiddle - React, Tailwind, and code Playground

by rufwork

HTML

<form>
    handler1, param is "event": 
        <input type="text" size="10" onkeypress="handler1(event)"> (works)<br />

    handler1, no params: 
        <input type="text" size="10" onkeypress="handler1()"> (blows up in handler1)<br />

    handler1, param is "e": 
        <input type="text" size="10" onkeypress="handler1(e)"> (blows up before handler1)<br />

<br />

    handler2, Two params; event passed first: 
        <input type="text" size="10" onkeypress="handler2(event, spam)"> (works; alerts not null)<br />

    handler2, Two params; event passed second: 
        <input type="text" size="10" onkeypress="handler2(spam, event)"> (undefined; alerts not null)<br />

    handler2, Two params; first is null with event second: 
        <input type="text" size="10" onkeypress="handler2(null, event)"> (alerts not null, then blows up)<br />

    handler2, Two params; second is null: 
        <input type="text" size="10" onkeypress="handler2(event, null)"> (works; no alert)<br />

<br />

    handler3, Two params; event passed second: 
        <input type="text" size="10" onkeypress="handler3(spam, event)"> (works (?!) <b>and</b> alerts spam)<br />

    handler3, Two params; first is null &amp; second is "event": 
        <input type="text" size="10" onkeypress="handler3(null, event)"> (works (?!))<br />

    handler3, Two params; first is null &amp; second is "e": 
        <input type="text" size="10" onkeypress="handler3(null, e)">  (e is not defined; does't execute)<br />
    
    handler3, Two params; first is null, second is shabloobah: 
        <input type="text" size="10" onkeypress="handler3(null, shabloobah)"> (undefined)<br />
    
    handler3, Two params; first is null, second is shabloobah: 
        <input type="text" size="10" onkeypress="handler3(spam, shabloobah)"> (alerts spam, undefined)<br />
  
<br />
    
    dynamic handler (id testId set to anon funct)
        <input type="text" size="10" id="testId"> (alerts spam, undefined)<br />
   ...

JavaScript

var spam = "spam";
var shabloobah = "shabloobah";

function handler1(event) {
    document.forms[0].elements['output'].value = event.which;
}

function handler2(event, psecond) {
    if (null !== psecond) {
        alert('not null');                
    }
    document.forms[0].elements['output'].value = event.which;
}

function handler3(psecond, event) {
    try {
        if ("spam" === psecond) {
            alert("spam");        
        }    
        document.forms[0].elements['output'].value = event.which;
    } catch (err) {
        alert(err);
    }
}

document.getElementById('testId').onkeypress = function(e) {
    document.forms[0].elements['output'].value = e.which;
};

document.getElementById('testId2').onkeypress = handler1;