SyntaxError: missing ; before statement | ReferenceError:[function] is not defined

Question

I'm getting a error in the code that previously worked fine. Im not sure if I have made any changes to it.

Error:

SyntaxError: missing ; before statement

Code Snippet:

function ChangeOptions() {
var x = document.getElementById("Select1").value;
var y = document.getElementById("Select2");
var z = document.getElementById("Select3");

 if(x == "Sch"){y.innerHTML = "<option value="Sch1">Sch1</option><option  value="Sch1">Sch2</option>"; 
                z.innerHTML = "<option value="1">1</option><option value="1" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>";}
if(x == "COMM"){y.innerHTML = "<option value="COMM1">COMM1</option><option value="COMM2">COMM2</option>"; 
                z.innerHTML = "<option value="1-4">1-4</option><option value="5-7">5-7</option><option value="8-10">8-10</option>";}
if(x == "Inst"){y.innerHTML = "<option value="Inst1">Inst1</option><option value="Inst2">Inst2</option>"; 
                z.innerHTML = "<option value="1-4">1-4</option><option value="5-7">5-7</option><option value="8-10">8-10</option>";} 
}

When I initially load my site i get this error in the console. If i click on the select button in my html which calls this function on onchange event, then I get a error

ReferenceError: ChangeOptions is not defined

But, when I remove the conditional operators(ifs) then I don't get the ReferenceError: ChangeOptions is not defined

Can someone please guide me through this?

Answer 1

Your strings are getting torn apart by the inner double quotes. Use single quotes on the outside or escape the inner quotes using a backslash.

E.g. "This is a \"valid\" string" or 'This is a "valid" string' too.

Just a gotcha - use triple equals for exact equality. Unless you know the exact reason to use double equals equality matching, don't. That is my 2 cents.

function ChangeOptions() {
  var x = document.getElementById("Select1").value;
  var y = document.getElementById("Select2");
  var z = document.getElementById("Select3");

  if (x === "Sch") {
    y.innerHTML = '<option value="Sch1">Sch1</option><option  value="Sch1">Sch2</option>';
    z.innerHTML = '<option value="1">1</option><option value="1" value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>';
  }
  if (x === "COMM") {
    y.innerHTML = '<option value="COMM1">COMM1</option><option value="COMM2">COMM2</option>';
    z.innerHTML = '<option value="1-4">1-4</option><option value="5-7">5-7</option><option value="8-10">8-10</option>';
  }
  if (x === "Inst") {
    y.innerHTML = '<option value="Inst1">Inst1</option><option value="Inst2">Inst2</option>';
    z.innerHTML = '<option value="1-4">1-4</option><option value="5-7">5-7</option><option value="8-10">8-10</option>';
  }
}