Why is my function not defined and not loading

Question

I have a function that's called with a submit button and another that is based on key entry enter. When I run my code I keep getting an error saying myFunction() is not defined why is this?

js code: The validate function is suppose to add in user input elements based on how many volunteers need and invitation for the website. the myFunction() code is supposed to save fields of the form to variable (more code variables are in here but you guys don't need to see that)

html: it is a basic form the user is supposed to enter how many guests and the JavaScript is supposed to create a field for each recipient name. I am then supposed to save the names to and array which I will be working on later but I can get past the myFunction is not defined error.

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>

score 0 · Accepted Answer · answered Jan 21 '20 at 03:14

0

That's definitely not intuitive, but the name "myFunction" as you had it is basically ignored. Try this instead.

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

window.onload = myFunction;

answered Jan 21 '20 at 03:14

user2740650

1,723
12
19

See also [this answer](https://stackoverflow.com/questions/3854141/naming-an-anonymous-function) for a bit of background. The style you used is useful for debugging, but what you had doesn't actually declare a function by that name. – user2740650 Jan 21 '20 at 03:17
The key part in the [linked article](http://kangax.github.io/nfe/) is "In a nutshell, named function expressions are useful for one thing only — descriptive function names in debuggers and profilers" – user2740650 Jan 21 '20 at 03:19
Thanks a lot, this helped me get one step further and understand a little more – Patchesforever Jan 21 '20 at 21:24

Why is my function not defined and not loading

1 Answers1