我想要一个按钮来添加 html 标签到我的表单

Question

我正在尝试插入一个新的 label 并在单击按钮时输入我的表单。 JavaScript 还是很新的。 我并没有真正掌握它。

我的 HTML 文件中有以下表格：

<form id="form" action="">

                <label for="round">Runda:</label>
                <input type="number" id="formRound">

                <label for="">Datum:</label>
                <input type="date" id= "formDate">

                <label for="">Markör:</label>
                <input type="text" id="formMarker">

                <button id="addNewHole">Lägg till hål</button>
            </form>

当我单击 ID 为“addNewHole”的按钮时，我将创建一个新的 label 并输入。

到目前为止，这是我的 javascript 代码。

let newInput = "<label>Hål:</label><br><input type=\"Text\" id=\"hole\"></input>"

document.querySelector("#addNewHole").addEventListener("click", function(newInput){
    document.querySelector("#form").innerHTML = newInput;

})

我虽然这段代码会做我想要的，但是当我点击我的按钮时，我看到的是：

[object MouseEvent]

Answer 1

您期望newInput将通过参数newInput传递到您的事件处理程序，但事件回调会自动传递Event object 触发它们，这就是您的参数所代表的。 由于您已经声明newInput ，您应该从回调中删除参数声明并访问您的变量。

 let newInput = "<label>Hål:</label><br><input type=\"Text\" id=\"hole\"></input>" document.querySelector("#addNewHole").addEventListener("click", function(){ document.querySelector("#form").innerHTML = newInput; });

 <form id="form" action=""> <label for="round">Runda:</label> <input type="number" id="formRound"> <label for="">Datum:</label> <input type="date" id= "formDate"> <label for="">Markör:</label> <input type="text" id="formMarker"> <button id="addNewHole">Lägg till hål</button> </form>

除此之外：

input元素没有结束input标签。

默认情况下， form中的button元素将是提交按钮。 如果您只想要一个不提交的按钮，则需要添加type="button" 。

您不应该像在事件回调中那样一遍又一遍地在文档中搜索相同的 DOM 元素。 在 function 之外只获取一次 DOM 引用，并根据需要随时引用它。 此外，当访问具有id的元素时，使用.getElementById()而不是.querySelector()因为.getElementById()通常被优化为更快。

您应该尽可能避免使用.innerHTML ，因为它具有安全性和性能影响，并且（如您所见）迫使您必须处理引号和连接。 相反，创建新的 DOM 对象，配置它们，然后将它们 append 放入文档中。 这是更多的代码，但代码更容易维护。

所以，这是你的代码重做：

 // Get your DOM references just once and use `.getElementById()` when // searching for elements that have ID's let myForm = document.getElementById("form"); // Create new DOM Object instead of building HTML strings let newCode = document.createElement("div"); let newLabel = document.createElement("label"); newLabel.textContent = "Hål:"; let br = document.createElement("br"); let newInput = document.createElement("input"); newInput.type = "text"; newInput.id = "hole"; // Append the elements newCode.appendChild(newLabel); newCode.appendChild(br); newCode.appendChild(newInput); document.getElementById("addNewHole").addEventListener("click", function(){ // Append to the document form.appendChild(newCode); });

 <form id="form" action=""> <label for="round">Runda:</label> <input type="number" id="formRound"> <label for="">Datum:</label> <input type="date" id= "formDate"> <label for="">Markör:</label> <input type="text" id="formMarker"> <button id="addNewHole" type="button">Lägg till hål</button> </form>