Scope - Getting value from local variable?

Question

I'm trying to take the value from a textarea element and have it appended to a p element. The problem is that they are in different functions. Have tried using return and writing it outside the function but nothing is working. Please help.

javascript:

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var newNote = document.getElementById("newNote");

var createNote = function(){
    var noteTitleValue = prompt("Please label the new note:");
    var noteContainer = document.createElement("li");
    var textArea = document.createElement("textarea");
    var noteTitle = document.createElement("label");
    var submitButton = document.createElement("button"); submitButton.innerHTML = "Submit";
    noteContainer.appendChild(noteTitle);
    noteContainer.appendChild(textArea);
    noteContainer.appendChild(submitButton);
    div1.appendChild(noteContainer);
    noteTitle.innerText = (noteTitleValue);
    return textArea;

    submitButton.onclick = submitClicked;
    // submitButton.onclick = div1.removeChild(noteContainer);


    var submitClicked = function (){
        console.log(textArea.value); // not working.
        console.log("test"); // not working either.
        var savedNoteContainer = document.createElement("li");
        var pArea = document.createElement("p");
        savedNoteContainer.appendChild(pArea);
        div2.appendChild(savedNoteContainer);
        var textValue = (textArea.value);
        pArea.innerHTML = textValue;
    };
};


newNote.onclick = createNote;

css:

#div1 {
    width: 200px;
    height: 200px;
    border: solid 1px #000;
}

#div2 {
    width: 200px;
    height: 200px;
    border: solid 1px #000;
}

html:

<!DOCTYPE html>
<html>
    <head>
        <title>Todo App</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">    
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>

        <button id="newNote">Add Note</button>

        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

You could simply move the `submitClicked` function inside of the `createNode` function. — Bergi, Dec 04 '14 at 18:58
Hey Bergi I made the changes and edited the post (changed the double textArea thing, and put the submitClicked function inside the createNote function). But when I click the submit button nothing changes at all, none of the elements in the submitClicked function are created and there are no errors in console. Any other suggestions? Thanks a lot! — Markus Hallcyon, Dec 04 '14 at 19:04
You probably want to *use* the variable in `submitButton.onclick = submitClicked;` *after* you have assigned the function to it :-) — Bergi, Dec 04 '14 at 19:07
I'm a beginner and am trying to decipher what you mean. Which variable do you mean, I don't think there is a variable in submitButton.onclick = submitClicked;.... Also which function? Sorry for not understanding, Thanks a lot! — Markus Hallcyon, Dec 04 '14 at 19:16
`submitClicked` is still `undefined` when you use it in the `onclick` assignment. Only in the line after that you assign the function to `submitClicked`. Swap the two statements and it should work. — Bergi, Dec 04 '14 at 19:20
I switched the two and it still didnt work (put `submitButton.onclick = submitClicked;` under the `submitClicked` function). I didn't think that would matter because I remember learning about how the compiler reads all the functions then executes all the assignments. — Markus Hallcyon, Dec 04 '14 at 19:42
That only works for [function declarations, not function expression assignments](http://stackoverflow.com/q/336859/1048572). You should use function declarations if possible. — Bergi, Dec 04 '14 at 19:46

score 0 · Accepted Answer · answered Dec 04 '14 at 21:03

Here's a solution for you. I also cleaned up your code quite a bit.

document.getElementById("newNote").addEventListener("click", function () {
    var noteTitleValue = prompt("Please label the new note:", "");
    if (noteTitleValue !== null) {
        var noteTitle = document.createElement("label");
        noteTitle.innerHTML = (noteTitleValue);
        document.getElementById("div1").appendChild(noteTitle);

        var textArea = document.createElement("textarea");
        textArea.id = "TextArea";
        document.getElementById("div1").appendChild(textArea);

        var submitButton = document.createElement("button")
        submitButton.id = "SubmitButton";
        submitButton.innerHTML = "Submit";
        document.getElementById("div1").appendChild(submitButton);

        document.getElementById("SubmitButton").addEventListener("click", function () {
            var textValue = document.getElementById("TextArea").value;
            var pArea = document.createElement("p");
            pArea.innerHTML = textValue;
            document.getElementById("div2").appendChild(pArea);

            var parentNode = document.getElementById("div1")
            while (parentNode.hasChildNodes()) {
                parentNode.removeChild(parentNode.lastChild);
            }
        });
    }
});

div {
  width: 200px;
  height: 200px;
  border: solid 1px #000;
  float: left; /* Just for the snippet demo */
}

<div id="div1"></div>
<div id="div2"></div>
<button id="newNote">Add Note</button>

So, now that you've seen it work, here's what I did.

First - I got rid of all of the global variables, it's generally a bad idea to clog up the global scope. In this solution, all of the event handlers are anonymous functions.

document.getElementById("newNote").addEventListener("click", function () { });

Second - I added in some id's for your elements that will be re-used. It's just good practice to do so. I also re-structured the code so it is readable, and I removed the unnecessary <li> elements (there was no parent <ul> or <ol> element for the <li> elements).

var textArea = document.createElement("textarea");
textArea.id = "TextArea";
document.getElementById("div1").appendChild(textArea);

Third - inside of the main event handler, I added an event handler for the submit button that handles all of the Submit functionality:

document.getElementById("SubmitButton").addEventListener("click", function () { });

Last - I added a small section of code to remove the elements from the first div after the note has been added, which allows the entire process to be repeated indefinitely.

var parentNode = document.getElementById("div1")
while (parentNode.hasChildNodes()) {
    parentNode.removeChild(parentNode.lastChild);
}

Can't thank you enough for this answer, if you read this, is there anyway I can get in touch with you? I just want to ask you a few thing about your software engineer experience if you want. Thanks again! — Markus Hallcyon, Dec 07 '14 at 14:51
@MarkusHallcyon - We can chat further here: https://chat.stackoverflow.com/rooms/66405/howards-invite-only-programming-discussions I don't have discussions outside of StackOverflow. — Howard Renollet, Dec 08 '14 at 13:40

Scope - Getting value from local variable?

1 Answers1