EventListener UI in JavaScript

Im Folgenden sind drei Hauptoptionen der Benutzeroberfläche (UI) aufgeführt, mit denen Webanwendungen mithilfe von JavaScript erstellt werden.

Der folgende Code zeigt, wie Eingaben über HTML und das entsprechende JavaScript in das Document Object Model (DOM) eingefügt werden, um Auswahlinformationen zu erhalten.

Optionsfeld

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

Dropdown

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

Texteingabe

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

Viel Spaß beim Üben! ?

Das obige ist der detaillierte Inhalt vonEventListener UI in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!