DEV Community

Cover image for EventListener UI in JavaScript
Practicing Datscy
Practicing Datscy

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode
// 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');
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
// 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."; 
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
// 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
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
oculus42 profile image
Samuel Rouse • Edited

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.

Collapse
 
practicing_datscy profile image
Practicing Datscy

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