오늘은 토글키를 만들어봤다.
생활코딩센세 만세다.
정말 삐약이 수준의 눈높이 강의를 해주셔서
그리고 댓글달아주시는 분들도 내 궁금증을 등 긁어주듯이 긁어주셔서 너무나 명쾌하게 해결하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1><a href="index.html">WEP</a></h1>
<input
type="button"
value="다크모드"
onclick="document.querySelector('body').style.
backgroundColor = 'black'
document.querySelector('body').style.color = 'white'"
;
/>
<input
type="button"
value="아침모드"
onclick="document.querySelector('body').style.
backgroundColor = 'white'
document.querySelector('body').style.color = 'black'"
;
/>
<input
id="togle"
type="button"
value="다크모드"
onclick="
if(document.querySelector('#togle').value ==='다크모드')
{
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#togle').value='아침모드';
} else {
document.querySelector('body').style.
backgroundColor = 'white';
document.querySelector('body').style.
color = 'black';
document.querySelector('#togle').value='다크모드';
}
"
/>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>JavaScript</h2>
<p>이것이 자바다.</p>
</body>
</html>
'프론트엔드 > js' 카테고리의 다른 글
| [생활코딩 WEB2 JS 20강] Loop & Array 반복문 배열 (0) | 2023.08.08 |
|---|---|
| [생활코딩 WEB2 JS 18강] 코딩 잘하는법? 중복 제거하기! 리팩토링 (0) | 2023.08.08 |
| [생활코딩 WEB2 JS 12강] 제어할 태그 선택하기 onclick, Selcet 선택자 구글링하기, Document.querySelector(), css는 소문자,js는 대문자 이해하기 (0) | 2023.08.07 |
| [JS] 강의 찾는데만 한나절.. 챗GPT로 해결보다 (0) | 2023.08.06 |
| String, Number, Boolean (0) | 2023.08.06 |
