0

I have some JS that is working in all browsers except for IE.

When I open my console on that page, I get this error: SCRIPT1014: Invalid character on the following line:

const template = `

This is the part it breaks on:

const template = `
<div class='row sortwrap'>
  <div class='col-md-8'>
    <input type='text' name='category[]' placeholder='' class='form-control name_list catinput' />
    <i class='mdi mdi-sort dragndrop'></i>
  <div class='questionlist questionwrap'>
    <div class='row'>
      <div class='col-md-8'>
        <button class='btn btn-success questionbutton'>Extra vraag</button>
        <input type='text' name='question[]' placeholder='1. Voeg een vraag toe' class='form-control name_list questioninput' />
      </div>
      <div class='col-md-4'>

      </div>
    </div>
    </div>
  </div>
  <div class='col-md-4'>
  <button id='addcategory' class='btn btn-danger btn_remove removebutton'>X</button>
  </div>
</div>`;

const vraagTemplate = `
<div class="row" id="question">
  <div class="col-md-8">
    <input type="text" name="question[]" class="form-control name_list questioninput" />
  </div>
  <div class="col-md-4">
    <button class="btn btn-danger btn_remove">X</button>
  </div>
</div>`;

I tried using ' or " but then it also stops working and I get this error:

SCRIPT1015: Unterminated string constant

On the same line.

What can I do about this?

I found this answer: IE11 throwing "SCRIPT1014: invalid character" where all other browsers work But everything I have is just plain HTML, and changing the quotes does not work.

twan
  • 2,450
  • 10
  • 32
  • 92
  • You cannot replace it with single quotes directly, because the text contains embedded single quotes. Using double quotes should work. Also, what version of IE are you using? – Andy G Nov 13 '18 at 10:38
  • @AndyG Yes I know, I tried it both ways, double and single quotes for both the HTML inside the const and the quotes wrapping it. I am using IE 11. – twan Nov 13 '18 at 10:39
  • In the second string you would first have to replace the double with single quotes (or escape them). – Andy G Nov 13 '18 at 10:40

1 Answers1

1

Short answer:

Template literals are not supported by IE!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

So you can't even use ` for strings. You need to use normal ' or double quotes " for your strings. If the content of the string contains quotes too you need to escape them.

And keep in mind, normal strings aren't multi-line by default. More details in this SO post:
Creating multiline strings in JavaScript

Working examples:

const vraagTemplate =
  '<div class="row" id="question">' +
  '  <div class="col-md-8">' +
  '    <input type="text" name="question[]" class="form-control name_list questioninput" />' +
  '  </div>' +
  '  <div class="col-md-4">' +
  '    <button class="btn btn-danger btn_remove">X</button>' +
  '  </div>' +
  '</div>';

console.log(vraagTemplate);

const vraagTemplate = ' \
<div class="row" id="question"> \
  <div class="col-md-8"> \
    <input type="text" name="question[]" class="form-control name_list questioninput" /> \
  </div> \
  <div class="col-md-4"> \
    <button class="btn btn-danger btn_remove">X</button> \
  </div> \
</div>';

console.log(vraagTemplate);
eisbehr
  • 12,243
  • 7
  • 38
  • 63