作用域 - 從局部變量獲取值？

我試圖從一個textarea元素的值，並將其附加到p元素。問題在於它們具有不同的功能。已嘗試使用返回並在函數外寫入，但沒有任何工作。請幫忙。作用域 - 從局部變量獲取值？

的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>

來源

2014-12-04 Markus Hallcyon

爲什麼在代碼中創建兩個'textArea's？ – Bergi 2014-12-04 18:56:41

您可以簡單地在'createNode'函數中移動'submitClicked'函數。 – Bergi 2014-12-04 18:58:57

嘿Bergi我做了更改和編輯帖子（改變了雙文本區域的東西，並把submitClicked函數內的createNote函數）。但是，當我單擊提交按鈕時根本沒有任何更改，submitClicked函數中的任何元素都不會創建，並且控制檯中也沒有錯誤。還有其他建議嗎？非常感謝！ – 2014-12-04 19:04:53

這裏是你的解決方案。我也清理了你的代碼。

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

來源

2014-12-04 21:03:40

如果你看到這個答案，不能夠感謝你，有沒有問題可以與我聯繫？如果你願意，我只想問你一些關於你的軟件工程師經驗的事情。再次感謝！ – 2014-12-07 14:51:27

@MarkusHallcyon - 我們可以在這裏進一步聊天：https://chat.stackoverflow.com/rooms/66405/howards-invite-only-programming-discussions我沒有討論過StackOverflow。 – 2014-12-08 13:40:10

作用域 - 從局部變量獲取值？

回答

相關問題