JavaScript의 EventListener UI

다음은 JavaScript를 사용하여 웹앱을 만드는 세 가지 주요 사용자 인터페이스(UI) 옵션입니다.

아래 코드는 선택 정보를 얻기 위해 HTML 및 해당 JavaScript를 통해 DOM(문서 개체 모델)에 입력을 삽입하는 방법을 보여줍니다.

라디오 버튼

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

즐거운 연습 되세요! ?

위 내용은 JavaScript의 EventListener UI의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!