无法设置按钮的onclick属性

Question

I have a button calling a js function. Everything in the function runs but at the end I try to set the onclick value for the button and nothing happens. The catch block doesn't even generate an error

var nextButton = document.getElementById("next");
try{
if(tvalue == "trend"){
  nextButton.onclick = "generateLocations()";
}
else if (tvalue == "stats"){
  nextButton.onclick = "generateCategories()";
}
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
} 

I have also tried setting the onclick value these ways

nextButton.onclick = function () { generateCategories(); };
nextButton.onclick = generateCategories;

the tvalue variable is set like this:

var t = document.getElementById("type");
var tvalue = t.options[t.selectedIndex].value;

Other test outputs have shown that this retrieves the value no problem

The relevant HTML:

<form id='fieldsets' action="../scripts/reportParse.php">
<fieldset>
<legend> Select Report Type </legend>
  <select id="type" name="type">
    <option value="trend"> Waitlists over Time </option>
    <option value="stats"> Region Statistics </option>
  </select>
</fieldset>

<button id="next" onclick="generateRegions()"> Next </button>

I've been trying solutions based on the following page:

Change onclick action with a Javascript function

and w3schools.com

Thanks for any help. I've been hung up on this for a little bit now

Edit: I've tried useing event listeners based on a comment below and am now getting the error "i is not defined'. which seems odd since i is not referred too inside the try block.

The whole function in case i've missed something stupid:

function generateRegions(){
var t = document.getElementById("type");
var tvalue = t.options[t.selectedIndex].value; // The value of the selected option

var names = ["Downtown", "Glenmore", "Mission", "Rutland"];

var regions = document.createElement("FIELDSET");
regions.setAttribute("id","Region");
var temp = document.createElement("LEGEND");
temp.innerHTML = "Select Region:";
regions.appendChild(temp); //creating the fieldset div and assigning its legend

for(var i = 0; i < 4; i++){
  var templ = document.createElement("LABEL");

  var str1 = "chk";
  var str2 = i.toString();
  var id = str1.concat(str2); //creating a dynamic ID so each checkbox can be referred to individually

  templ.setAttribute("for",id);

  temp = document.createElement("INPUT"); //creating the checkbox and assigning its values

  temp.setAttribute("type","checkbox");
  temp.setAttribute("name","region");
  temp.setAttribute("value",names[i]);

  temp.setAttribute("id",id);

  regions.appendChild(templ);
  templ.innerText = names[i]+':'; //creating and placing the label, then placing its checkbox
  regions.appendChild(temp);
}

document.getElementById("fieldsets").appendChild(regions); //adding the fieldset to the overall form
var nextButton = document.getElementById("next");
try{
if(tvalue == "trend"){
  nextButton.onclick = "generateLocations()";
}
else if (tvalue == "stats"){
  nextButton.onclick = "generateCategories()";
}
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
} 

//document.getElementById("demo").innerHTML = tvalue; //checking that the type variable is properly found

}

Answer 1

Try adding an event listener to your code so the JavaScript is separated from the HTML markup. Like so:

var nextButton = document.getElementById("next");
try{
if(tvalue == "trend"){
  nextButton.addEventListener("click",generateLocations()) ;
}
else if (tvalue == "stats"){
  nextButton.addEventListener("click",generaCategories()) ;
}
}
catch(err) {
  document.getElementById("demo").innerHTML = err.message;
} 

You can test if the event listener is working by adding a console log on the functions you are executing.

Source: https://www.w3schools.com/js/js_htmldom_eventlistener.asp