为什么我的HtML中的功能结果打印失败？

Question

我已经搜索过类似的问题并尝试了一些不同的方法，但我的JavaScript函数生成的列表在运行后不会显示在我的HTML中。似乎一直出现的错误是：document.getElementByID(...)为空。这是我的代码：

HTML ：

      <input type="button" value="Natural Supports List" onclick="naturalSupports();"/>
    <p id="output"></p>

的JavaScript ：

document.getElementById("Natural Supports List").onclick = function naturalSupports (e){
  e.preventDefault();
  var output = document.getElementById("output").value;
  output.innerHTML(userMessage);

}
  function naturalSupports(){

    var supports = [];
    var userSupports = "";
    var supportsloop = true;
    var totalSupports = 0;
    var userMessage = "";

    while (supportsloop) {
      userSupports = prompt("Enter one of your natural supports, or leave blank to stop.");
      if (userSupports === ""){
        supportsloop = false;
      }else{
        supports.push(userSupports); 
      }
    }

    totalSupports = supports.length;
    var userList;

    for(var index=0; index < supports.length; index++) {
      userList = supports[index] + "<br>";
    }


    listMessage = "Here is a list of your supports: ";
    userMessage = "<strong>Here is a list of your supports: </strong><br>" + userList;

    return userMessage;        
  }

Answer 1

你可以直接从Button onClick Action调用一个函数， 因此，请按以下方式更改Javascript代码

function naturalSupports(){

    var supports = [];
    var userSupports = "";
    var supportsloop = true;
    var totalSupports = 0;
    var userMessage = "";

    while (supportsloop) {
      userSupports = prompt("Enter one of your natural supports, or leave blank to stop.");
      if (userSupports === ""){
        supportsloop = false;
      }else{
        supports.push(userSupports); 
      }
    }

    totalSupports = supports.length;
    var userList;

    for(var index=0; index < supports.length; index++) {
      userList = supports[index] + "<br>";
    }


    listMessage = "Here is a list of your supports: ";
    userMessage = "<strong>Here is a list of your supports: </strong><br>" + userList;

  var output = document.getElementById("output").value;
  output.innerHTML(userMessage);
  }

Answer 2

试试这段代码： - 的 HTML

<input type="button" value="Natural Supports List" id="natural" onclick="naturalSupports();"/>
    <p id="output"></p>

Java脚本

  function naturalSupports(){

    var supports = [];
    var userSupports = "";
    var userList = "";
    var supportsloop = true;
    var totalSupports = 0;
    var userMessage = "";

    while (supportsloop) {
      userSupports = prompt("Enter one of your natural supports, or leave blank to stop.","");
      if (userSupports === ""){
        supportsloop = false;
      }else{
        supports.push(userSupports); 
      }
    }

    totalSupports = supports.length;
    var userList;

    for(var index=0; index < supports.length; index++) {
      userList += supports[index] + "<br>";
    }


    listMessage = "Here is a list of your supports: ";
    userMessage += "<strong>Here is a list of your supports: </strong><br>" + userList;

   document.getElementById("output").innerHTML += userMessage;
  }

它运行得很好。

Answer 3

您的按钮是否有任何ID？  ＆＃34;自然支持列表＆＃34;是你按钮的价值。 因此，您无法使用doWork来获取元素。 在按钮中添加document.getElementsById属性。该功能将运行。

顺便说一句，您最好将id命名为不带空格的单词。