为什么我的函数未定义且未加载

Question

我有一个使用提交按钮调用的函数和另一个基于键输入的函数。当我运行我的代码时，我不断收到一条错误消息说 myFunction() 未定义这是为什么？

js 代码：验证功能是假设根据志愿者需要多少和网站的邀请来添加用户输入元素。 myFunction() 代码应该将表单的字段保存到变量中（这里有更多代码变量，但你们不需要看到）

html：这是一个基本表单，用户应该输入多少客人，JavaScript 应该为每个收件人姓名创建一个字段。然后我应该将名称保存到我稍后将处理的数组中，但我可以通过 myFunction is not defined 错误。

var wage = document.getElementById("howMany");
window.onload = wage.addEventListener("keydown", function(e) {
  if (e.keyCode === 13) {
    validate(e);
  }
});

function validate(e) {
  var num = document.getElementById("howMany").value;

  for (i = 1; i < num; i++) {
    //loop set to repeat to the amount of guests inputed by user
    container.appendChild(document.createTextNode("Recipient " + (i + 1) + ":"));
    //creates a text for the user to read which recipient each input is for
    var x = document.createElement("input");
    //creates the input element
    x.setAttribute("id", "empInput" + i);
    x.setAttribute("type", "text");
    //sets the type and attribute
    container.appendChild(x);
    //places the input element in the container
    //values.push(x);  
  }
}

window.onload = function myFunction() {
  //loads the function on page load to change variables for user
  var urlParams = new URLSearchParams(location.search);
  //sets var for the URL information the users inputed information on submit
  //var num = urlParams.get("howMany");
  //sets the var for the amount of guests attending
  var container = document.getElementById("container");
  //sets a variable to reference the container in the form to place the input elements    
  var values = new Array();
}

<section id="pageForm">
  <form name=myForm action="#">
    <div>
      <label for="howMany">How Many Guests:
                    <br />(max. 10) <br />
                </label>
      <input type="number" id="howMany" value="" placeholder="0" />

    </div>
    <div>
      <label for="recipientName">Recipient name:
            </label>
      <input type="text" name="recipientName" placeholder="Enter your Recipient Name" />
    </div>

    <div id="container">
      <a href="#" id="filldetails" onkeydown="enterFunction()"></a>
    </div>

    <label for="organizationName">Organization name:
            </label>
    <input type="text" name="organizationName" placeholder="Enter your Organization Name" />

    <label for="eventDate">Event Date:
            </label>
    <input type="text" name="eventDate" placeholder="Enter your Event Date" />

    <label for="websiteURL">URL:
            </label>
    <input type="text" name="websiteURL" placeholder="Enter your Website URL" />

    <label for="hostName">Host name:
            </label>
    <input type="text" name="hostName" placeholder="Host Name" />

    <input type="submit" value="Submit" onclick="myFunction()">
  </form>
</section>

Answer 1

这绝对不直观，但是您拥有的名称“myFunction”基本上被忽略了。试试这个吧。

function myFunction() {
    //loads the function on page load to change variables for user
    //etc. as before
}

window.onload = myFunction;