使用Js如何設置兩個輸入字段的值作為此功能的起點和終點？

Question

function createYears( start , end ) {
    "use strict";
    var years;
    document.write("<select>");
    for (years = start ; years <= end ; years = years + 1){
        document.write(`"<option>"`  + years +  `"</option>"`);
    }
    document.write("</select>");
}

Answer 1

首先創建兩個輸入字段，並為其提供ID，如下所示：

<input type="number" id="start"/>
<input type="number" id="end"/>

然后創建一個按鈕：

<button id="btn">Generate</button>

然后在您的javascript文件中向按鈕添加事件監聽器：

var btn = document.getElementById("btn"),              // get the button element
    startField = document.getElementById("start"),     // get the start input element
    endField = document.getElementById("end");         // get the end input element

btn.onclick = function() {                             // when the button is clicked
    var start = parseInt(startField.value),            // get the value of the start input (convert to number using parseInt)
        end = parseInt(endField.value);                // same for end

    createYears(start, end);                           // call createYears using the above values
}

Answer 2

我想我了解...您想使用代碼並擁有一個實際的用戶界面來使用它。

• 不要使用document.write

• 用appendChild()和add()替換document.write

• 添加了<form> ，兩個<input type='number'>和一個<button>

• 因為formControls在<form>我們可以使用HTMLFormControlsCollection ，它提供了較短的語法來用於操縱，引用等所有formControls（即輸入，輸出，選擇，按鈕等）。

• 除了前面提到的內容外，當開始年份大於結束年份時，這還將根據用戶輸入錯誤進行調整。 如果發生這種情況，此演示將交換值。 例如 用戶數據： 開始： 1972 結束： 1968結果將是一樣的用戶數據是： 開始： 1968 結束： 1972

參考

• HTMLFormControlsCollection

• 加（）

• appendChild（）

• HTML input type ='number'標簽

演示版

 var form = document.forms[0]; function createYears(start, end) { var sel = document.createElement('select'); form.appendChild(sel); var yrs; if (start > end) { var temp1 = start; var temp2 = end; start = temp2; end = temp1; } for (yrs = start; yrs <= end; yrs = yrs + 1) { var opt = document.createElement('option'); opt.textContent = yrs; opt.value = yrs; sel.add(opt); } return false; } 

 button, input, select, option { font: inherit } input { width: 6ch; } 

 <form id='calendar'> <label for='start'>Start: </label> <input id='start' type='number' min='1'> <label for='end'>End: </label> <input id='end' type='number' min='1'> <button type='button' onclick='createYears(start.valueAsNumber, end.valueAsNumber)'>Years</button><br><br> </form> 

Answer 3

您必須先創建這兩個input和一個button 。 然后點擊button創建select通過document.createElement()的所有option通過for循環。 最后，使用document.body.appendChild()追加select document.body.appendChild() 。 請嘗試以下操作：

 let el = document.getElementById('create'); el.addEventListener('click',function createYears() { var elementExists = document.getElementById("mySelect"); if(elementExists){ document.getElementById("mySelect").remove(); } var selectEl = document.createElement("select"); selectEl.id = "mySelect"; let start = document.getElementById('start').value; start = parseInt(start); let end = document.getElementById('end').value; end = parseInt(end); for ( let years = start ; years <= end ; years = years + 1){ selectEl.options[selectEl.options.length] = new Option(years, years); } document.body.appendChild(selectEl); }); 

 <input tpe="text" id="start" placeholder="Start Year" /> <input type="text" id="end" placeholder="End Year" /> <input type="button" id="create" value="Create" /><br/> 

Answer 4

較短的版本：

 Start: <input id=y1 type=number> End: <input id=y2 type=number value=3e3> <button onclick='var d = document, s = d.createElement("select"), y = y1.value; while (y <= y2.value) s.add(new Option(y++)); d.body.appendChild(s)'>Years</button>