Simple jQuery script works in Chrome, broken in IE

Question

I have a simple bit of jQuery that populates a field with a random string after 3 seconds.

Here is a demo: https://jsfiddle.net/5sLrtg5t/

If you load this demo in IE 11, it doesn't populate the field. Why is this?

function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for( var i=0; i < 8; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}

var urlParams = new URLSearchParams(window.location.search);
var keys = urlParams.keys();
for (key of keys) {}
setTimeout(function() {
  if(document.location.search.length) {
  } else {
    $('#address').val(makeid());
  }
}, 3000);

error in dev tools console should give you clues...what is it? — charlietfl, May 31 '17 at 13:21

Patrick Barr · Accepted Answer · 2017-05-31T13:35:20.073

You're using a for ... of which isn't supported by IE, try using a for ... in instead (using Object.hasOwnProperty() if you want a similar behavior):

function makeid()
{
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for( var i=0; i < 8; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}

var urlParams = new URLSearchParams(window.location.search);
var keys = urlParams.keys();
for (key in keys) {}
setTimeout(function() {
  if(document.location.search.length) {
  } else {
    $('#address').val(makeid());
  }
}, 3000);

I'll be honest the point of that second for loop confuses me, you might be able to get rid of it entirely.

EDIT: As mentioned in the comments by @charlietfl URL API as a whole is also not supported.

How can I get query string values in JavaScript? has a nice function that I believe should do something similar to what you're trying to do:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Alternatively there are also quite a few libraries out there to be able to use the URL API on non-supported browswers, WebReflection/url-search-params is just one of the few that showed up from a quick google search.

@PatrickBarr That doesn't seem to resolve the issue. I'm still getting this in my Console `'URLSearchParams' is undefined`. — michaelmcgurk, May 31 '17 at 13:24
@michaelmcgurk as charlietfl pointed out, that's also not supported by IE *cough* classic *cough* you'll need to work around it, I edited my answer to include another SO post on that matter as well as a github repo that seems to define it so it is usable in browsers that don't support it — Patrick Barr, May 31 '17 at 13:32
Many thanks for your help, Patrick. I will investigate this shortly. — michaelmcgurk, May 31 '17 at 13:33

Simple jQuery script works in Chrome, broken in IE

1 Answers1