EventListener UI in JavaScript

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

This blog post below shows how to insert inputs into the Document Object Model (DOM) via HTML and the corresponding JavaScript to obtain user selection information.

Radio button

<!-- 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>
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";
    }
}

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


// Specify tasks for onClick button
function button0_task() {

    var text_input0 = document.getElementById("text_input0").value;
    // Other tasks
}

Happy Practicing! 👋

💻 GitHub | 🌷 Practicing Datscy @ Dev.to | 🌳 Practicing Datscy @ Medium

References

1. MDN UI Events: https://developer.mozilla.org/en-US/docs/Web/API/UI_Events

Comments

[Samuel Rouse]

Hello! I recommend following the Formatting Code directions to add syntax highlighting to your examples and make them easier to read! You can create separate code samples for your HTML and JavaScript and have them each formatted.

Also, I see the use of async function but async doesn't appear to be necessary for any of the functions in your examples. Though the event handlers are called asynchronously, async is only needed if your are using the await keyword.

Finally, it appears you're Text input example is cut off, stopping in the middle of the button0_task function.

[Practicing Datscy]

Thank you for the feedback. The article about the notation was very helpful!