"Add More" button resetting input fields in the browser

Hello fellow developers!

So, I'm new to this whole programming thing. I've been learning JavaScript on my own using Elon Musk's 'teach to the problem, not to the tool" approach to education, by planning the project I want to build and then learning how to use JavaScript to accomplish this feat. I particularly like this way of education as it is advantageous to developing a thorough understanding of the language.

The issue:

I need JavaScript to create a new HTML input field every time the "add more" button is clicked. To accomplish this, I wrote this code:

function addTime(){    `let scheduler = document.getElementById("schedule").innerHTML;`     `document.getElementById("moreTime").innerHTML = scheduler;`  }  

The ("schedule") ID is the div that holds the input fields I need and I added an "onclick" to the "add more" button that calls the addTime function when the button is clicked and it works!

The problem is that every time the button is clicked in the web browser, it creates new input fields, but it resets the values from the previous input fields that are created by clicking the button while the original HTML input element that shows up in the browser is untouched. I've tried changing the button from the <button></button> tag, to the <input> tag. I've tried using an event listener both in the function and when the function is called. The button still works under all of these conditions, but it still resets the values, so, I am assuming it has something to do with the code in the function, not the HTML code.

Why is it doing this and how do I get JavaScript to create new input fields when the button is clicked AND store the values of the previously created input fields when the button is clicked again?

Thanks a lot in advance for your help!

Oh! I should probably add that the input field is an HTML "time" that looks like 00:00 am/pm. The default for the field in the web browser is -- : -- -- with a little clock to add the desired time and time of day.

https://stackoverflow.com/questions/65867012/add-more-button-resetting-input-fields-in-the-browser January 24, 2021 at 12:01PM