Question

我正在尝试从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>

Answer 1

这是您的解决方案。我也清理了你的代码。

＆＃13;

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);
            }
        });
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

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

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);
}

范围 - 从局部变量获取值？

1 个答案: