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>

应该为我的<option>创建一个新的<select>，但是它只执行1秒钟，然后所有东西都消失了。

我试图在控制台上打印i，但即使在控制台上也能打印出结果，一切都消失了。

我确信我做的每件事都很好，那么如何使其在这里工作呢？

Answer 1

如果您要向选择中添加新选项，请使用“ appendChild（）”函数：

 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); 
    }

每次单击添加按钮时，都会在选择中添加新选项

Answer 2

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>

在按钮中使用type =“ button”。

Answer 3

作为代码上的简单示例，只需添加参数事件，并防止表单提交的默认事件，您还可以更改

的类型

<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();
 }

Answer 4

当您单击按钮时，正在提交表单。

onload事件可用于设置按钮的click事件。

防止提交：

<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>';
       }
    }
}

使用innerHTML和onclick事件添加元素

4 个答案: