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