关于onclicks，createElement等的基本javascript问题？

我真的不明白为什么我会遇到这么多小问题。这些问题也在javascript中注释掉了。非常感谢您的帮助！关于onclicks，createElement等的基本javascript问题？

1）如何获取并使用createNote函数之外的窗体数据？
2）为什么formArea，textArea和submitButton在点击submitButton的时候从div1内消失？
3）Alert正在出现，为什么它不是console.log？
4）没有控制台日志出现，为什么？
5）为什么div2中不显示'p'标签？

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>

CSS：

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

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

的javascript：

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

var createNote = function(){ 
    var formArea = document.createElement("form"); formArea.id = "form_1"; 
    var textArea = document.createElement("textarea"); 
    var submitButton = document.createElement("button"); submitButton.innerHTML = "Submit"; 
    formArea.appendChild(textArea); 
    formArea.appendChild(submitButton); 
    div1.appendChild(formArea); 
    var getValue = document.getElementById("form_1").value; // how do I get and use the form's data outside this function? 

    submitButton.onclick = submitClicked; // why does formArea, textArea and submitButton disappear from inside div1 on the click of submitButton? 
}; 

var submitClicked = function(){ 
    alert("asdf"); // alert is appearing, why is it but not console.log? 
    console.log("asdf"); // no console log appearing, why? 
    var paragraphArea = document.createElement("p"); // why isnt this showing up in div2? 
    div2.appendChild(paragraphArea); 
    paragraphArea.innerHTML = "asdf"; 
}; 

newNote.onclick = createNote;

来源

2014-12-03 Markus Hallcyon

当你点击一个button这是一个form里面，form会被自动提交。这意味着页面重新加载。这就是为什么您的自定义元素不断消失以及为什么警报会启动。控制台日志已打印，但随后在刷新时移除（可通过在Chrome中打开控制台上的“保留日志”功能来验证此操作）

为了解决这个问题，在你的submitClicked函数中，你需要防止表单的默认行为。类似的，

var submitClicked = function(event) { 
    event.preventDefault(); 
    ... Rest of the code. 
}

来源

2014-12-03 02:58:13

这回答了我的一些问题。谢谢。 – 2014-12-04 03:07:47

关于onclicks，createElement等的基本javascript问题？

回答

相关问题