Question

I have this javascript inside a rails app:

<script type="text/javascript">

var buttons = document.querySelectorAll('[data-radio-sub-questions]');
for (var i = 0; i < buttons.length; i++){
    buttons[i].addEventListener('click', show_sub_questions, false);
}

function show_sub_questions(e){
    e = e.target   // e.srcElement; was an attempt at making it work in IE
    var hidden_div = document.getElementById(e.dataset.radioSubQuestions)
            // document.getElementById(e.getAttribute('data-radio-sub-questions')); also an attempt at making it work in IE 

    if(e.checked && hidden_div.className == 'hidden_questions_swipe'){
        hidden_div.className = 'revealed_questions_swipe';
    }else if(e.checked && hidden_div.className == 'revealed_questions_swipe'){
        hidden_div.className = 'hidden_questions_swipe';
    }else{
        return;
    }
}
</script>

So I am working on a very large application that allows people to buy insurance online, it has a lot of questions that if answered in a particular way show more questions that then need to be answered.

The above selects all the radio buttons which I put a data attribute on, it then assigns a click function to them. The data attribute actually holds the id of the div that needs to be shown if the question is answered in a particular way.

Here is the css: I am ok with the transistions not working in IE but I also need to know if the min/max/height attributes will work in the .revealed_questions_swipe class.

.hidden_questions_swipe{
    height: 1px;
    transition: all .1s ease-in-out;
    -webkit-transition:all .1s ease-in-out;
    -moz-transition:all .1s ease-in-out;
    visibility:hidden;
}

.revealed_questions_swipe{
    height: auto;
    min-height: 42px;
    max-height: auto;
    transition: all .1s ease-in-out;
    -webkit-transition:all .1s ease-in-out;
    -moz-transition:all .1s ease-in-out;
    visibility: visible;
}

I’m actually used to working on chrome applications so making it compliant with IE’s lack of support is new to me 🙁 any help would be appreciated.

UPDATE:

So I now have (after reading comments and answers):

var buttons;

if(!document.querySelectorAll){
    buttons = get_elements_for_ie("data-radio-sub-questions");
} else{
    buttons = document.querySelectorAll('[data-radio-sub-questions]');
}



for (var i = 0; i < buttons.length; i++){

    if(!buttons[i].addEventListener){
        buttons[i].attachEvent("onclick", show_sub_questions);
    }else {
        buttons[i].addEventListener('click', show_sub_questions, false);
    }
}

function show_sub_questions(e){
    e = e.target || e.srcElement;
    var hidden_div = document.getElementById(e.dataset.radioSubQuestions) || document.getElementById(e.getAttribute('data-radio-sub-questions'));

    if(e.checked && hidden_div.className == 'hidden_questions_swipe'){
        hidden_div.className = 'revealed_questions_swipe';
    }else if(e.checked && hidden_div.className == 'revealed_questions_swipe'){
        hidden_div.className = 'hidden_questions_swipe';
    }else{
        return;
    }
}

function get_elements_for_ie(data_attr){
    var matched_elements = [];
    var all_elements = document.getElementsByTagName("*");

    for(var i = 0; i < all_elements.length; i++){
        if(all_elements[i].getAttribute(data_attr)){
            matched_elements.push(all_elements[i])
        }
    }
    return matched_elements
}

Still not working in IE 8 or 9 and still not seeing any errors.

Answer 1

You will need shivs/workarounds for querySelectorAll and addEventListener, as well as uncommenting your commented out code for e.srcElement and the dataset workaround. In other words, I recommend jQuery. 🙂 (Though you can of course do without it if you really want.)