Question

I have a radio button that I am masking as a button using an image background. When the user clicks the li containing the radio button I package up the radio button as an object “el” and run a function to get results using the element as an argument. This works fine in FF and Chrome but I get an error that the element is null or not an object.

Can anyone see my problem?

var selectedid = $this.find("[type='radio']").attr('id');
document.getElementById(selectedid).checked = true;
var el = document.getElementById(selectedid);
var el = $(el);
showResults( el );


function showResults( el ) {
    var id = el[0].dataset['item'];
    alert(id);
}

Answer 1

Your code is pretty inefficient and .dataset is not supported in all browsers. Since you’re already using jQuery, I’d suggest cleaning up your code like this:

var selected = $this.find("[type='radio']").first().prop("checked", true);
showResults( selected );


function showResults( el ) {
    var id = el.data("item");
    alert(id);
}