Why the querySelector (JavaScript) doesn't work with Internet Explorer?

Question

I have the following code below, that supposed to pass on value from one HTML page to another. The code works fine with Firefox, but it is not working for IE 11. Could you please tell me why the code is not working? Thanks in advance

FORM.HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>OrderUp</title>
</head>

<body>
     <form method="get" action="results.html" >  
    Name : <input name = "name" type= "text" id="name">
    <br>
    <input value = "Submit" type = "submit" >
 </form>
</body>
</Html>

RESULTS.HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
</head>
<body>
    <h2> Your Form Has Been Submitted </h2>
<div class = "first"> Name: </div>
<script>
   let params = (new URL(document.location)).searchParams;
   let name = params.get("name");
   console.log(name) 
   document.querySelector('.first').innerText += name;
</script>
</body>
</html>

Why are there random spaces in your code between property names and the values? Some browsers may have an issue with this... — Luca Kiebel, Apr 10 '18 at 15:19
@Luca is correct, Firefox and Chrome are more forgiving than IE with syntax. — Pogrindis, Apr 10 '18 at 15:23
@Luca I removed the random spaces, but that didn't solve the problem. — sam s, Apr 10 '18 at 15:36
I can see two reasons you're having problems. First, IE11 doesn't support ES6 syntax (let) https://www.caniuse.com/#search=es6. Second, IE11 doesn't support URL API https://www.caniuse.com/#search=URL — Jonathan Chaplin, Apr 10 '18 at 16:03

score 0 · Answer 1 · answered Apr 10 '18 at 16:21

The problem you have is that you're using features that aren't supported by IE11 (let, URL API). See my comments. The following works for me in IE11. It's based on this stackoverflow post. If instead you want to use ES6 syntax you can try an ES6 to ES5 transpiler.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
    <script>
var parseQueryString = function() {
    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};
    </script>
</head>
<body>
    <h2> Your Form Has Been Submitted </h2>
<div class = "first"> Name: </div>
<script>
   var params = parseQueryString();
   var name = params["name"];
   console.log(name) 
   document.querySelector('.first').innerText += name;
</script>
</body>
</html>

Why the querySelector (JavaScript) doesn't work with Internet Explorer?

1 Answers1