关于onclicks，createElement等的基本JavaScript问题

Basic javascript questions about onclicks, createElement and more?

本文关键字：JavaScript 问题 onclicks createElement 关于      更新时间：2023-09-26

我真的不明白为什么我会遇到这么多小问题。这些问题也在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.
}
相关文章：