[DOM_Event] JS - change 이벤트 (= onchange 속성) ★ - 요소값변경이벤트 (= 체인지이벤트 = 온체인지) ※ 옵션값 선택시 바로 SUBMIT 전송 ※ (물건품목/수량) 선택 계산

1. onchange 예제 - select 선택창에서 선택한 내용 보여주기
2. onchange 정의
3. onchange 지원 HTML 태그 종류
4. onchange 예제 - 입력 내용을 대문자로 변환
5. onchange 예제 - input 입력 내용 변경 감지 이벤트
6. onchange 예제 - (물건품목/수량) 선택해서 계산
7. onchange 예제 - 특정 여분필드 값 변경 시 다른 값 자동 입력
8. onchange 예제 - 실렉트 태그에 링크 걸기

onchange 예제 - select 선택창에서 선택한 내용 보여주기 

 

<select id="hz" onchange="homzzang()">

  <option value="">선택

  <option value="HTML">HTML

  <option value="CSS">CSS

  <option value="JS">JS

</select>

 

<p id="view"></p>

 

<script>

function homzzang() {

    var x = document.getElementById("hz").value;

    document.getElementById("view").innerHTML = x + "선택";

}

</script>

 

결과 보기

onchange 정의

 

요소값 변경 이벤트 발생.

 

---

 

1.
radio 버튼과 checkbox 경우, 체크 상태 변경 시 onchange 이벤트 발생.

2.

input 이벤트와 유사하나, 2가지 차이점 존재.

• input 이벤트 - 요소값 변경 직후에 발생하며, <select> 요소에서는 작동 안 함.
• change 이벤트 - 요소값 변경 후 요소가 포커스 잃으면 발생하며, <select> 요소에서도 작동함.

3.
모든 브라우저 지원

 

onchange 지원 HTML 태그 종류

 

• <input type = "check">
• <input type = "file">
• <input type = "password">
• <input type = "radio">,
• <input type = "range">
• <input type = " 검색 ">
• <input type ="text ">
• <select> ~ </select> 
• <textarea> ~ </textarea>

 

onchange 예제 - 입력 내용을 대문자로 변환

[HTML 속성 방식]

 

아이디 입력: <input type="text" id="hz" onchange="homzzang()">

<script>

function homzzang() {

    var x = document.getElementById("hz");

    x.value = x.value.toUpperCase();

}

</script>

 

결과보기

---

[JS 속성 방식]

 

아이디 입력: <input type="text" id="hz">

<script>

document.getElementById("hz").onchange = function() {homzzang()};

function homzzang() {

    var x = document.getElementById("hz");

    x.value = x.value.toUpperCase();

}

</script>

 

결과보기

onchange 예제 - input 입력 내용 변경 감지 이벤트

 

<input type="text" name="hz" value="홈짱닷컴 Homzzang.com" onchange="hz(this.value)">

<script>

function hz(val) {

  alert("입력내용 변경됨 : " + val);

}

</script>

 

결과보기

onchange 예제 - (물건품목/수량) 선택해서 계산

 

<select name="item" id="item" onchange="price_value()">

    <option value="">-품목-</option>

    <option value="1000">오이</option>

    <option value="3000">호박</option>

</select>

<select name="count" id="count" onchange="price_value()">

    <option value="">-수량-</option>

    <option value="1">1개</option>

    <option value="2">2개</option>

    <option value="3">3개</option>              

</select>

<div>가격 <span id='price'></span></div>

<script>

function price_value(){

    itemk = document.getElementById('item').value;

    valuek =document.getElementById('count').value;                               

    if(itemk && valuek){
        res = itemk * valuek; 

        document.getElementById('price').innerText =res.toLocaleString('ko-KR', {style:"currency", currency:"KRW"});

    }

}

</script>

 

결과보기

균이 님 (221002) https://sir.kr/qa/475227

onchange 예제 - 특정 여분필드 값 변경 시 다른 값 자동 입력

(예) wr_1 여분필드 값에 따라 wr_2 여분필드에 다른 값 자동 입력

 

<select id="wr_1" name="wr_1">

    <option style="display:none">언어선택</option>

    <option>HTML</option>

    <option>CSS</option>

    <option>JS</option>

</select>

<input id="wr_2" name="wr_2">

<script>

wr_1.onchange = function() {

    if (wr_1.value === "HTML") wr_2.value = "구조";

    else if (wr_1.value === "CSS") wr_2.value = "디자인";

    else if (wr_1.value === "JS") wr_2.value = "기능";

    else  wr_2.value = "";

}

wr_1.value = "<?php echo $write['wr_1']; ?>";

wr_1.value = wr_1.value === "" ? "언어선택" : wr_1.value;

wr_1.onchange();

</script>

 

비타주리 님 (230225) https://sir.kr/qa/489062

onchange 예제 - 실렉트 태그에 링크 걸기

 

<select onchange="window.open(this.value);">

    <option>사이드 바로가기</option>

    <option value="https://homzzang.com">홈짱닷컴</option>

    <option value="https://yamette.com">야메떼닷컴</option>

</select>

 

결과보기