정구리의 우주정복
[Javascript] button onclick 사용하기 본문
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Study Schedule</h1>
<p>공부할 주제를 기록해 보세요</p>
<input type="text" id="input_value" autofocus>
<button id="btn">추가</button>
<hr>
<ul id="study-list">
</ul>
<script>
let btn = document.getElementById('btn');
let std = document.getElementById('study-list');
btn.onclick = function(){
let input = document.getElementById('input_value').value;
const input_value = document.createElement('li');
input_value.textContent = input;
std.append(input_value);
}
</script>
</body>
</html>html은 그냥 대강 만들었고
script 부분을 살펴보자
button 과 ul 부분을 가져와준다
이후
button.onclick = function(){} 형태를 사용하면 버튼 클릭시 실행될 함수 지정이 가능하다 !!!
input 안에있는 value 값을 가져온 뒤 새로운 li 태그를 생성해서 text 값을 넣어주고 append 해주자 !!
반응형
'STUDY > K-DIGITAL' 카테고리의 다른 글
| [Javascript] to-do list 만들기 (0) | 2022.09.04 |
|---|---|
| [Javascript] 버튼 클릭 시 글자 색 변하게 하기 (0) | 2022.09.04 |
| [JavaScript] Javascript 로 todo 의 input 구현 html 에 요소 추가 (0) | 2022.09.04 |
| [HTML/CSS] 네이버 회원가입 폼 만들기 (0) | 2022.08.29 |
| [HTML/CSS] float 정복하기 (0) | 2022.08.28 |
'STUDY/K-DIGITAL' Related Articles
more
Comments