Add elements With innerHTML and onclick event

Question

start = document.forms[0].start,
    end = document.forms[0].end,
    result = document.getElementById('result'),
    btn = document.getElementById('btn'),
    selector = document.getElementById('selector'),
    i = start.value;

btn.onclick = ()=> {
    "use strict";
     for (i;  i < end.value ; i++) {
        selector.innerHTML += '<option>' + i + '</option>';
     }
 }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>challenge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="selector.css" />

</head>

<body>
    <header>
        <h1>challenge 2 </h1>
        <h2>Create an HTML select</h2>
    </header>
    <section id="input">
        <div class="container">
            <form>
                <input type="text" name="start" id="start" >
                <input type="text" name="end" id="end">
                <button value="generate"  id="btn"> generate</button>
            </form>
        </div>
    </section>

    <section id="result">
        <select name="years" id="selector">
         </select>
     </section>
    <script src="selector.js"></script>
</body>

</html>

It is supposed to create a new <option> for my <select>, but it executes for 1s only, and then every thing disappears.

I tried to print i on the console but even on the console make the results and every thing was gone.

I am sure I did every thing good so what is the solution to make it work here?

add event parameter to your **btn.onclick** and prevent form submission in that handler (i.e.: e.preventDefault();) — gaetanoM, Aug 11 '18 at 18:04
Possible duplicate of [Javascript code disappears after button click](https://stackoverflow.com/questions/18119773/javascript-code-disappears-after-button-click) — Heretic Monkey, Aug 13 '18 at 12:29

michaelitoh · Answer 1 · 2018-08-11T18:14:52.013

If you are trying to add a new option to the select use the "appendChild()" function:

 var form = document.getElementByTagName("form")[0];
 var btn = document.getElementById('btn');
 //To avoid refresh the page when the form is submited.
 form.addEventListener("click", function(e){e.preventDefault()},false); 
    btn.onclick = () => {
     var result = document.getElementById('selector'),
     var option= document.createElement("option");
     option.innerHTML = "some text";
     result.appendChild(option); 
    }

This wild add a new option in the select each time you click the add button

score 0 · Answer 2 · answered Aug 11 '18 at 18:05

start = document.forms[0].start,
    end = document.forms[0].end,
    result = document.getElementById('result'),
    btn = document.getElementById('btn'),
    selector = document.getElementById('selector'),
    i = start.value;

btn.onclick = ()=> {
      'use strict';
     for (i;  i < end.value ; i++) {
        selector.innerHTML += '<option>' + i + '</option>';
     }
 }

    <section id="input">
        <div class="container">
            <form>
                <input type="text" name="start" id="start" >
                <input type="text" name="end" id="end">
                <button type="button" value="generate"  id="btn"> generate</button>
            </form>
        </div>
    </section>

    <section id="result">
        <select name="years" id="selector">
         </select>
     </section>

Use type="button" into your button.

score 0 · Answer 3 · answered Aug 11 '18 at 18:08

as simple example on your code, just add parameter event, and prevent defaults event of form submit, you can also change the type of

<button value="generate"  id="btn" type='button'> generate</button>

btn.onclick = (event)=> {
    "use strict";
     for (i;  i < end.value ; i++) {
        selector.innerHTML += '<option>' + i + '</option>';
     }
event.preventDefault();
 }

score 0 · Accepted Answer · answered Aug 11 '18 at 18:15

The form is being submitted when you click the button.

onload event can be used to set the click event of the button.

Prevent the submit:

<form onsubmit="return false;">

JS:

window.onload = function() {
   btn = document.getElementById('btn');

    btn.onclick = function() {
       start = document.forms[0].start;
       end = document.forms[0].end;
       result = document.getElementById('result');
       selector = document.getElementById('selector');
       i = start.value;

       for (i;  i < end.value ; i++) {
          selector.innerHTML += '<option>' + i + '</option>';
       }
    }
}

Add elements With innerHTML and onclick event

4 Answers4