JavaScript 中的事件監聽器 UI

以下是使用 JavaScript 建立 Web 應用程式的三個主要使用者介面 (UI) 選項。

下面的程式碼展示如何透過 HTML 和對應的 JavaScript 在文件物件模型 (DOM) 中插入輸入以取得選擇資訊。

單選按鈕

// Radio button selection

<!-- Radio button menu: put in body -->

Radio option 0
Radio option 1

// Put in <script> async function processEvent_radioOption0(event) { if (this.getAttribute("checked") == false) { document.getElementById("text_input0").style.display = "none"; document.getElementById("text_input1").style.display = "none"; } else { document.getElementById("text_input0").style.display = "block"; document.getElementById("text_input1").style.display = "block"; } } async function processEvent_radioOption1(event) { if (this.getAttribute("checked") == false) { document.getElementById("text_input0").style.display = "none"; document.getElementById("text_input1").style.display = "none"; } else { document.getElementById("text_input0").style.display = "none"; document.getElementById("text_input1").style.display = "none"; } } document.getElementById("radioOption0").addEventListener("click", processEvent_radioOption0, false); document.getElementById("radioOption1").addEventListener("click", processEvent_radioOption1, false); // Put in a function in <script> const radioOption0 = document.getElementById("radioOption0").checked; const radioOption1 = document.getElementById("radioOption1").checked; if (radioOption0 == false && radioOption1 == false) { document.getElementById('notification').innerHTML = "Please select radioOption0 or radioOption1."; } if (radioOption0 == true && radioOption1 == false) { console.log('radioOption0'); } if (radioOption0 == false && radioOption1 == true) { console.log('radioOption1'); } <p><strong>下拉<br> <pre class="brush:php;toolbar:false">// Drop down selection <!-- Drop down menu: put in body --> <label for="select_dropdown_option_label">Select a drop down option: <select name="dropdown_options" id="dropdown_options" style="display:block"> <option value="---">Select an option <option value="drop_down_option0">drop_down_option0 <option value="drop_down_option1">drop_down_option1 <option value="drop_down_option2">drop_down_option2 // Put in <script> async function processEvent_dropdown_options(event) { // there is nothing in event that tells which drop down was selected // console.log('event: ', event); const element = document.getElementById("dropdown_options"); console.log('element.selectedIndex: ', element.selectedIndex); // OR // console.log('element.options.selectedIndex: ', element.options.selectedIndex); if (document.getElementById("dropdown_options").selectedIndex == 1) { document.getElementById("text_input").style.display = 'block'; } else { document.getElementById("text_input").style.display = 'none'; } } document.getElementById("dropdown_options").addEventListener("change", processEvent_dropdown_options, false); // Put in a function in <script> var dropdown_option_type = document.getElementById("dropdown_options").value; if (dropdown_option_type == 'drop_down_option0') { } else if (dropdown_option_type == 'drop_down_option1') { } else if (dropdown_option_type == 'drop_down_option2') { } else { document.getElementById('notification').innerHTML = "Please select a drop down option type."; } <p><strong>文字輸入<br> <pre class="brush:php;toolbar:false"><!-- Text input: put in body --> <input type="text" name="text_input0" id="text_input0" value="" style="display:block;"> <button id="button0" onclick="button0_task()" style="display:none;">button0 // Put in <script> async function processEvent_text_input(event) { // Make something change when text is typed into the text input if (document.getElementById("text_input0").value.length > 0) { // If something is typed into the text input box // Make a button appear document.getElementById("button0").style.display = 'block'; } else { document.getElementById("button0").style.display = 'none'; } } document.getElementById("text_input0").addEventListener("change", processEvent_text_input, false); // Put in a function in <script> async function button0_task() { var text_input0 = document.getElementById("text_input0").value; <p>祝你練習愉快！ ？ </script>

以上是JavaScript 中的事件監聽器 UI的詳細內容。更多資訊請關注PHP中文網其他相關文章！