我真的不明白为什么我会遇到这么多小问题。这些问题也在javascript中被注释掉了。非常感谢任何帮助!
1) 如何在 createNote 函数之外获取和使用表单的数据?
2)为什么在单击提交按钮时,formArea,textArea和submitButton从div1内部消失?
3)出现警报,为什么是控制台.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;
当您单击form
内的button
时,将自动提交form
。这意味着页面重新加载。这就是您的自定义元素不断消失以及警报启动的原因。控制台日志已打印,但在刷新时被删除(您可以通过在 Chrome 的主机上启用"保留日志"功能来验证这一点)
若要处理此问题,需要在 submitClicked
函数中阻止窗体的默认行为。像这样,
var submitClicked = function(event) {
event.preventDefault();
... Rest of the code.
}