js
function check_text() {
var value = document.getElementById("console").value;
console.log(value);
if (value == "지냥아") {
document.getElementsByClassName("cat_says")[0].innerHTML="지냥이 왜 불러~?";
} else if (value == "지냥이 손!") {
document.getElementsByClassName("cat_says")[0].innerHTML="손 말고 츄르 달라옹!";
} else {
alert("지냥이는 지금 사료 먹는 중! 말 걸어줄거야?");
}
}html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="eleven.css"/>
</head>
<body>
<div class="layout">
<img class="cat" src="지냥이.jpg">
<div class="cat_says">
지냥이는 신관 앞 벤치에 살아!
</div>
<br>
<div class="input_layout">
<input type="text" id="console" class="input_style">
</div>
<div class="button" onclick=check_text()>
</div>
<script src="./eleven.js"></script>
</div>
</body>
</html>css//제공된 자료의 일부를 수정해 사용했다. 너무 길기 때문에 버튼 부분만 넣겠음
.button {
width: 150px;
background: url(./paw.png) center no-repeat #ffbd2f;
height:50px;
background-size: 60px;
border-radius: 100px;
padding: 20px 60px;
color: #fff;
text-decoration: none;
font-size: 1.45em;
text-align: center;
margin: auto;
margin-top: 30px;
cursor: pointer;
}
.button:active {
-webkit-animation: active 1200ms ease 1 alternate;
animation: active 1200ms ease 1 alternate;
background: #ffc038;
background: url(./paw.png) center no-repeat #ffbd2f;
background-size: 60px;
}result
'교육 > 2022 모각코 코뮤니티 2월과정 - js' 카테고리의 다른 글
| 모각코2월-JS-13일차-챗봇3 (1) | 2022.03.01 |
|---|---|
| 모각코2월-JS-12일차-챗봇2:배경색 (0) | 2022.02.22 |
| 모각코2월-JS-10일차-전화걸기 (0) | 2022.02.18 |
| 모각코2월-JS-9일차-영화소개 (0) | 2022.02.18 |
| 모각코2월-JS-8일차-전광판 (0) | 2022.02.18 |
