Oninput event not triggering in HTA using JavaScript-CodePudding

I'm learning JavaScript using some examples I've found online. And in working on an HTA I've come a cropper trying to work out why the "oninput" event won't trigger. I've included the relevant code below to demonstrate my issue. Please note I'm using Edge compatibility in the meta tag. I would appreciate any information on what I'm doing wrong. Thanks.

<!DOCTYPE html> 
<html> 
<head>
    <title>Test</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <hta:application 
    id=""
    applicationname=""
    border="thin"
    borderstyle="normal"
    caption="yes"
    icon=""
    maximizebutton="no"
    minimizebutton="yes"
    scroll="yes"
    levelintaskbar="yes"
    singleinstance="yes"
    sysmenu="yes"
    version="1.00"
    windowstate="maximize"
    />
</head>  
<style>
body {
background-color: lightgray;
color: darkred;
font-family: "Arial";
}

h3 {
text-align: center;
}
</style>

<script type="text/javascript">

function level() {
f = document.getElementById("x").value;
document.getElementById("x_out").innerHTML = f   " factor";

switch(document.getElementById("y").value * 1){
    case 0: 
    type = "alpha"; 
    break; 
    case 1: 
    type = "beta"; 
    break;
    case 2: 
    type = "gamma"; 
    break;
    case 3: 
    type = "delta"; 
    break;
}    
document.getElementById("y_out").innerHTML = type;

v = document.getElementById("z").value * 1;
document.getElementById("z_out").innerHTML = v;
}
</script>

<body onl oad="level()">
<h3>Test</h3>
<p>
X:
<br>
<input type="range" id="x" min="40" max="6000" onclick="level()">
&emsp;<span id="x_out"></span>
</p> 
Y:
<br>
<input type="range" id="y" min="0" max="3" onchange="level()">
&emsp;<span id="y_out"></span>
<p>
Z:
<br>
<input type="range" id="z" min="0" max="100" oninput="level()">
&emsp;<span id="z_out"></span>
</p>
</body>
</html>

CodePudding user response：

With MSHTML, (the rendering engine used by MSHTA and IE), oninput will trigger with input type text, but will be ignored for input type range.

It's not a good idea to try to use an HTA to learn modern JavaScript. HTAs support JScript, so you will constantly run into situations like this. If you just want to work with a local file, save your examples with a .htm extension and run them in any modern browser, such as Chrome, Firefox, Edge, etc.

If you really want to write HTAs (i.e. in order to write code that has full access to the machine like an Exe) then you'll have to remember that any JavaScript examples you find have to work with IE 11.

In the case of your HTA, please note that IE=edge means "run in the latest IE mode provided by MSHTML". It has nothing to do with the Edge browser. Since the latest MSHTML has been version 11 for a very long time (and will never go beyond that), you might as well specify IE=11 to be more clear on what mode your HTA is in. Also, be aware that beyond IE=9, the hta:application section is ignored (which is why your HTA is not opening maximized).

But, as you probably discovered, the range input type requires IE=10 or higher. Therefore, in order to use range AND hta:application attributes, you will need to split your HTA into two files, as shown here.