Javascript onchange, onmouseup, onkeypress etc on IE. Help pls

Question

I hope someone can help I have a HTML form with 10 number input fields with class="takings". I want to attach a JS function ideally to the onchange event of each, but I'd settle for onmouseup or similar if I had to. the following is called from an external js file:

  function init(){
   var input = document.getElementsByClassName("takings"); 
    for (var i = 0; i < input.length; i++) { 
   input[i].onchange = function()
   {
    alert('testing');
   }
   input[i].value = 0.00; 

}
}
window.onload=init;

I have tested this code on firefox and chrome and it works fine. It does not however work on IE (I have tested IE8 and IE11 so far). I need to have this app run in IE as it is the only browser we use on our company network. Due to other dependencies changing it is not even an option. It did briefly occur to me that we may have some group policy in place blocking some browser functionality but the same behaviour occurs outside of our domain. Can anyone tell me where I'm going wrong or a way to achieve equivalent functionality on IE?

Thanks very much

*****UPDATE**********

function init(){
   var input = document.querySelectorAll(".takings"); 
    for (var i = 0; i < input.length; i++) { 
   input[i].attachEvent("onchange", function () {alert('testing');}); 
   input[i].value = 0.00;
} 

}

This code works only on ie8 and not ff or ie11

IE8 (as a browser from the dark ages that should be eliminated from the universe) doesn't support `getElementsByClassName`. It should work on IE11 though. — Quentin, Feb 18 '15 at 10:03
Assuming this is a textfield: try onkeyup() http://www.w3schools.com/jsref/event_onkeyup.asp — twh, Feb 18 '15 at 10:04
i think from ie9 on words querySelectorAll will work, let me know if you still have any problms — Arunprasanth K V, Feb 18 '15 at 10:13

score 0 · Answer 1 · answered Feb 18 '15 at 10:07

0

With ie you must use attachEvent. And the onchange is triggered when the element loose the focus. You can try onkeypress to work around it.

answered Feb 18 '15 at 10:07

Raulucco

3,406
1
21
27

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

try with

 document.querySelectorAll(".takings");

rather than

document.getElementsByClassName("takings");

querySelectorAll() Method supports IE9 on words

More Reference this , this

Update

We can use getElementsByClassName() in IE6,7,8 there is already a discussion in stackoverflow about this topic so if you want to do something like that then refer this

edited May 23 '17 at 12:20

Community

1
1

answered Feb 18 '15 at 10:16

Arunprasanth K V

20,733
8
41
71

Hi Arunprasanth, thanks for that I amended it to use querySelectorAll this now works on ff and ie8 but not ie11. It's bought me closer but I don't want to put a production app in place that will hold us to using ie8. Thanks very much for your help though – danparker Feb 18 '15 at 12:11
@danparker check the link in my answer there somebody explain the methods which will works on most of the browsers, if my answer is solved your problem then you can make it as right answer, then somebody can refer it in future – Arunprasanth K V Feb 18 '15 at 12:13
@danparker refer this http://stackoverflow.com/questions/22882305/get-element-by-classname-for-ie11 and this http://stackoverflow.com/questions/18404362/queryselectorall-alternative-for-ie – Arunprasanth K V Feb 18 '15 at 12:16
Tried this too: 'function init(){ var input = document.querySelectorAll(".takings"); for (var i = 0; i < input.length; i++) { input[i].addEventListener ("change", function() {alert('testing')}, false); input[i].value = 0.00; } }' Again works on ff, ie8 but not ie11 – danparker Feb 18 '15 at 12:17
@danparker if you don't have text box for another purposes then you can use document.getElementsByTagName() – Arunprasanth K V Feb 18 '15 at 12:26
if you are oke with jquery then you can do something like this $('.classname').each(function(i, obj) { //yourcode }); try this it will work – Arunprasanth K V Feb 18 '15 at 12:34

score 0 · Answer 3 · answered Feb 18 '15 at 14:18

    function getsum(){
    var total = 0;
    var fields = $('.takings');

    for (i = 0; i < fields.length; i++) {
    total += parseFloat(fields[i].value);
    }

    var label = document.getElementById("TotalLabel");
    label.innerHTML = total;
 }


function init(){

 $('.takings').change(function(){getsum()});

}

window.onload=init;

Working on all browsers, thanks for everyone's help!

Javascript onchange, onmouseup, onkeypress etc on IE. Help pls

3 Answers3