I am creating a system and my console says one of my functions are undefined

Question

I've been looking for an answer for this problem, but I feel like I need a much more in depth response from people, as I am a beginner to programming. Can someone please look over my code, and maybe test it out to identify my problem? My console keeps saying my addComment() function isn't defined. Here is my code:

<!Doctype HTML>
<html>
<head>
</head>
<body>
    <section>
        <p>Name:</p> <input type="text" id="Name"/>
        <br/>
        <br/>
        <p>Text:</p> 
        <textarea rows="10" cols="25" id="Text"></textarea> 
        <input id="Post" type="submit" value="Post" onclick="return addCom()"/>
        <br/>
        <br/>
        <h1 class="section">COMMENTS</h1>
    </section>

    <script>
        var Post = document.getElementById("Post");
        var Text = document.getElementById("Text").value;
        var Name = document.getElementById("Name").value;

        window.onload = function addCom() {
            document.createElement("div").innerHTML = Name + "says:" + Text;
        }
    </script>


</body>
</html>

Please identify my problems and let me know. It would be appreciated if you could tell me why my console kept saying my function wasn't defined. Thank you.

Regards, Amiya

Well, `addComment` is neither defined nor invoked anywhere in the code you posted. — CertainPerformance, Jun 25 '18 at 22:44
@CertainPerformance While it isn't defined, it is certainly invoked. The submit button. — Daedalus, Jun 25 '18 at 22:47
@CertainPerformance pretty obvious OP meant their `addCom` function, which is both defined and invoked. — Alex McMillan, Jun 25 '18 at 22:47
@Amiya Simply giving the function a name isn't the same as defining it. You attached the definition to a handler, rather than doing what you intended. Simply define it somewhere else, like say: `function addCom() { /* do stuff */ };`, then assign that function to both the handler and onload event: `window.onload = addCom;`. — Daedalus, Jun 25 '18 at 22:50
Possible duplicate of [javascript named function expressions - scope accessibility](https://stackoverflow.com/questions/17446646/javascript-named-function-expressions-scope-accessibility) — Sebastian Simon, Jun 25 '18 at 22:53

Alex McMillan · Accepted Answer · 2018-06-25T23:03:37.020

So there are a few things that jump out from your code.

First, why are you setting window.onLoad to your function? I assume you don't want your function run when the page loads, but instead when the user clicks your button?

window.onload = function addCom() {
    document.createElement("div").innerHTML = Name + "says:" + Text;
}

should be

function addCom() {
    document.createElement("div").innerHTML = Name + "says:" + Text;
}

Second, you are pulling the values from your form into the variables Post, Text and Name at the moment you load the page when you likely want to pull these values when the user clicks the button (ie: after they have entered values). You can do this by moving these into your function, like so:

<script>
    function addCom() {
        var Post = document.getElementById("Post");
        var Text = document.getElementById("Text").value;
        var Name = document.getElementById("Name").value;

        document.createElement("div").innerHTML = Name + "says:" + Text;
    }
</script>

Third, your function doesn't actually do much. It creates an element, sets its innerHTML value, but then... nothing. You need to do something with your new element. Try this:

function addCom() {
    var Post = document.getElementById("Post");
    var Text = document.getElementById("Text").value;
    var Name = document.getElementById("Name").value;

    var el = document.createElement("div");
    el.innerHTML = Name + "says:" + Text;
    document.body.appendChild(el); // add the new element to the page
}

Here is a snippet showing the final working example:

<!Doctype HTML>
<html>
<head>
</head>
<body>
    <section>
        <p>Name:</p> <input type="text" id="Name"/>
        <br/>
        <br/>
        <p>Text:</p> 
        <textarea rows="10" cols="25" id="Text"></textarea> 
        <input id="Post" type="submit" value="Post" onclick="return addCom()"/>
        <br/>
        <br/>
        <h1 class="section">COMMENTS</h1>
    </section>

    <script>

    function addCom() {
        var Post = document.getElementById("Post");
        var Text = document.getElementById("Text").value;
        var Name = document.getElementById("Name").value;
      
        var el = document.createElement("div");
        el.innerHTML = Name + "says:" + Text;
        document.body.appendChild(el);
    }
    </script>


</body>
</html>

jsbin

Thank you very much. The "window.onload" was for another function I was going to create, but I had made a mistake and put it there. I would also like to thank you for pointing out my innerHTML mistake, because that was my biggest problem. I've also left off a bit of my code because I had made an onclick event, but I must have not shown that. — Amiya, Jun 25 '18 at 23:20

I am creating a system and my console says one of my functions are undefined

1 Answers1