반응형
자바스크립트, 단추 클릭 시 내용 업데이트 예제
글. 수알치 오상문
웹에서 단추를 누르면 화면 내용 일부를 업데이트 하는 예제이다.
아래 예제 화면처럼 [입실]을 클릭하면
아래 결과 창 내용을 "환영합니다!"로 업데이트하고
[퇴실]을 클릭하면 "다음에 또 봐요!"로 업데이트 한다.
[화면] 첫 화면
[화면] 퇴실 단추를 누른 경우
예제 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<input type='button' value='입실' onclick="
document.querySelector('#article2').innerHTML='환영합니다!';">
<input type='button' value='퇴실' onclick="
document.querySelector('#article2').innerHTML='다음에 또 봐요!';">
</div>
<h2>결과 #2</h2>
<article id='article2'>
</article>
</body>
</html>
만약 찾는 파일이 없을 때, 에러 처리를 하려면 response.status 코드가 '404'인지 검사하여 처리할 수 있다.
<input type='button' value='실행' onclick="
function getText(response){
if (response.status == '404')
document.querySelector('#article4').innerHTML='파일을 찾을 수 없습니다.';
else
response.text().then(function(text) {
document.querySelector('#article3').innerHTML=text;
})
}
fetch('textdata1').then(getText);
">반응형
'JavaScript, jQuery' 카테고리의 다른 글
| 자바스크립트 가이드 (TCP School) (0) | 2022.06.06 |
|---|---|
| 자바스크립트 따옴표(')/큰따옴표(") 섞인 문자열 처리 3가지 방법 (0) | 2022.05.31 |
| 자바스크립트, HTML 콘텐츠 내용 변경 예제 (0) | 2022.05.29 |
| 자바스크립트, 이벤트 처리 (0) | 2022.05.28 |
| 웹브라우저, DOM (Document Object Model) (0) | 2022.05.28 |