EventListener UI in JavaScript

Below are three main User Interface (UI) options that create webapps using JavaScript.

The code below shows how to insert inputs in the Document Object Model (DOM) via HTML and the corresponding JavaScript to obtain selection information.

Radio button

// Radio button selection

<!-- Radio button menu: put in body -->
<fieldset>
<input type="radio" id="radioOption0" name="radio_name" value="radioOption0" />
<label for="radioOption0">Radio option 0</label>
<br>
<input type="radio" id="radioOption1" name="radio_name" value="radioOption1" />
<label for="radioOption1">Radio option 1</label>
</fieldset>


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

Drop down

// Drop down selection

<!-- Drop down menu: put in body -->
<label for="select_dropdown_option_label">Select a drop down option:</label>
<select name="dropdown_options" id="dropdown_options" style="display:block">
  <option value="---">Select an option</option>
  <option value="drop_down_option0">drop_down_option0</option>
  <option value="drop_down_option1">drop_down_option1</option>
  <option value="drop_down_option2">drop_down_option2</option>
</select>


// 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."; 
}

Text input

<!-- 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</button>


// 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;

Happy Practicing! ?

The above is the detailed content of EventListener UI in JavaScript. For more information, please follow other related articles on the PHP Chinese website!