Question

我有一个调用js函数的按钮。函数中的所有内容都会运行，但最后我尝试设置按钮的onclick值，但没有任何反应。 catch块甚至不会产生错误

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;
}

我也尝试过这些方式设置onclick值

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

tvalue变量设置如下：

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

其他测试输出显示此检索值没有问题

相关的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>

我一直在尝试基于以下页面的解决方案：

Change onclick action with a Javascript function

和w3schools.com

感谢您的帮助。我现在已经暂时挂了这个

编辑：我已尝试根据下面的评论使用事件监听器，现在我收到错误＆＃34;我没有定义＆＃39;。这似乎很奇怪，因为我在try块中没有被引用。

整个功能，以防我错过了一些愚蠢的事情：

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

尝试向代码添加事件侦听器，以便将JavaScript与HTML标记分开。像这样：

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;
}

您可以通过在正在执行的函数上添加控制台日志来测试事件侦听器是否正常工作。

来源：https://www.w3schools.com/js/js_htmldom_eventlistener.asp

无法设置按钮

1 个答案: