范围 - 从局部变量中获取价值？答案

【问题标题】：Scope - Getting value from local variable?范围 - 从局部变量中获取价值？
【发布时间】：2014-12-04 18:53:33
【问题描述】：

我正在尝试从 textarea 元素中获取值并将其附加到 p 元素中。问题是它们的功能不同。尝试使用 return 并在函数外部编写它，但没有任何效果。请帮忙。

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>

【问题讨论】：

为什么要在代码中创建两个textAreas？
您可以简单地将submitClicked 函数移动到createNode 函数内。
Hey Bergi 我进行了更改并编辑了帖子（更改了双 textArea 的东西，并将 submitClicked 函数放在 createNote 函数中）。但是当我单击提交按钮时，根本没有任何变化，submitClicked 函数中的任何元素都不会被创建，并且控制台中也没有错误。还有其他建议吗？非常感谢！
您可能想要使用 submitButton.onclick = submitClicked; 中的变量将函数分配给它:-)
我是一个初学者，正在尝试破译你的意思。你的意思是哪个变量，我不认为 submitButton.onclick = submitClicked;.... 还有哪个函数？很抱歉不明白，非常感谢！

标签： javascript html function onclick scope

【解决方案1】：

这里有一个解决方案。我还清理了你的代码。

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>

所以，既然你已经看到它的工作，这就是我所做的。

首先 - 我摆脱了所有的全局变量，堵塞全局范围通常是个坏主意。在此解决方案中，所有事件处理程序都是匿名函数。

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

第二 - 我为您的元素添加了一些 id，这些元素将被重复使用。这样做只是一个好习惯。我还重新构造了代码以使其可读，并删除了不必要的 <li> 元素（<li> 元素没有父元素 <ul> 或 <ol> 元素）。

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

第三 - 在主事件处理程序内部，我为处理所有 Submit 功能的提交按钮添加了一个事件处理程序：

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

最后 - 我添加了一小段代码，用于在添加注释后从第一个 div 中删除元素，这样可以无限期地重复整个过程。

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

【讨论】：

非常感谢您的回答，如果您阅读了此内容，是否可以与您取得联系？如果你愿意，我只想问你一些关于你的软件工程师经验的事情。再次感谢！
@MarkusHallcyon - 我们可以在这里进一步聊天：chat.stackoverflow.com/rooms/66405/…我没有在 StackOverflow 之外进行讨论。