Unable to set the onclick property of a button

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

}

Try adding some `console.log()` statements to ensure you are getting the values you think you are. e.g. after you get tvalue, try logging: `console.log("tvalue:" + tvalue);` to see if you get trend, stats, or an empty string, null, or undefined. — scunliffe, Apr 19 '18 at 02:22
The default type of a button is submit. If you want to continue processing without reloading the page, try a next button with a `type="button"` atrtibute. — traktor, Apr 19 '18 at 02:53
@scunliffe I've tried logging and it's showing the correct value still, thanks tho — ClayG, Apr 19 '18 at 05:20

JViteri · Answer 1 · 2018-04-19T14:50:32.633

0

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

edited Apr 19 '18 at 14:50

answered Apr 19 '18 at 02:54

JViteri

1
3

I tried swapping in your event listener code and i'm now getting the error message "i is not defined". this confuses me since i is not referred too inside the try block or at all outside of the for loop. – ClayG Apr 19 '18 at 05:06
@ClayG is it possible to see in what part of the code you are getting the error ? The "addEventListener" is calling on your functions "generate Locations" and "generateCategories", so the error could be inside those two functions. – JViteri Apr 19 '18 at 14:50

Unable to set the onclick property of a button

1 Answers1