使用innerHTML和onclick事件添加元素

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>

應該為我的<select>創建一個新的<option> ，但是它只執行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 個解決方案

解決方案1
0 2018-08-11 17:45:01

解決方案2
0 2018-08-11 18:05:54

解決方案3
0 2018-08-11 18:08:26

解決方案4
0 已采納 2018-08-11 18:15:03

使用innerHTML和onclick事件添加元素

問題描述

4 個解決方案

解決方案1 0 2018-08-11 17:45:01

解決方案2 0 2018-08-11 18:05:54

解決方案3 0 2018-08-11 18:08:26

解決方案4 0 已采納 2018-08-11 18:15:03

解決方案1
0 2018-08-11 17:45:01

解決方案2
0 2018-08-11 18:05:54

解決方案3
0 2018-08-11 18:08:26

解決方案4
0 已采納 2018-08-11 18:15:03