我想要单击按钮将 html 标记添加到我的表单

I want a button click to add html tags to my form

我正在尝试在单击按钮时插入新标签并输入到我的表单中。对 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”的按钮时,我将创建一个新标签并输入。

到目前为止,这是我的 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]

您期望 newInput 将通过参数 newInput 传递到您的事件处理程序中,但事件回调会自动传递触发它们的 Event 对象,这就是你的论点代表。由于您已经声明了 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 元素。在函数之外只获取一次 DOM 引用,并根据需要经常引用它。此外,当访问带有 id 的元素时,使用 .getElementById() 而不是 .querySelector(),因为 .getElementById() 通常被优化得更快。

您应该尽可能避免使用 .innerHTML,因为它会影响安全和性能,并且(如您所见)迫使您不得不处理引号和连接。相反,创建新的 DOM 对象,配置它们,然后将它们附加到文档中。这是更多的代码,但是代码更容易维护。

所以,这是您修改后的代码:

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