Question

我试图插入一个新标签，并在单击按钮时将其输入到表单中。对JavaScript还是很新的。我不是很了解。

我的HTML文件中具有以下格式：

for birthday_person in birthday_persons:
    if birthday_person in dates_ids:
        value = dates_ids.get(birthday_person)
        print(value)

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

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

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

尽管此代码可以实现我想要的功能，但是当我单击按钮时，我看到的只是：

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;

})

Answer 1

您期望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标记。

默认情况下，button中的form元素将是一个提交按钮。如果您只想要一个不提交的按钮，则需要添加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>

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

1 个答案: