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

Question

I'm trying to insert a new label and input to my form when a button is clicked. Still quite new to JavaScript. I'm not really getting the hang of it.

I have the following form in my HTML file:

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

When I click my button with the ID "addNewHole" I was to create a new label and input.

This is my javascript code thus far.

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;

})

I though this code would do what I wanted but when I click my button all I see is:

[object MouseEvent]

Answer 1

You are expecting that newInput will be passed into your event handler through the argument newInput , but event callbacks are automatically passed the Event object that triggered them and that is what your argument is representing. Since you've already declared newInput , you should just remove the argument declaration from the callback and access your variable.

 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>

Beyond that:

An input element does not have a closing input tag.

A button element within a form will be a submit button by default. If you just want a button that doesn't submit, you need to add type="button" .

You shouldn't search the document for the same DOM element over and over again as you are doing in your event callback. Get the DOM reference just once, outside of the function, and refer to that as often as you need to. Also, when accessing an element with an id , use .getElementById() as opposed to .querySelector() because .getElementById() is usually optimized to be faster.

You should avoid .innerHTML when you can as it has security and performance implications and (as you've seen) forces you to have to deal with quotes and concatenation. Instead, create new DOM objects, configure them and then append them into the document. This is more code, but the code is much easier to maintain.

So, here's your code reworked:

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