4-03.HTML 스타일 컨트롤
2023. 3. 30. 14:26ㆍJavascript/자바스크립트 제대로 배워볼래?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.border-red{
border: 2px dashed red;
}
.border-green{
border: 2px solid green;
}
.border-default {
border-width: 1px;
border-color: blue;
border-style: solid;
}
</style>
</head>
<body>
Text:
<br>
<input type="text" id="text1" onblur="changeBorder();">
<br> Radio(이메일 수신) :
<br>
<label><input type="radio" name="radio_email_yn" value="Y" onclick="showEmail();">동의</label>
<label><input type="radio" name="radio_email_yn" value="N" onclick="hideEmail()" checked>거부</label>
<div id="divEmail" style="display:none;">이메일<input type="text" id="email"></div>
<br> Select:
<br>
<select id="select1" onchange="doChange(this);">
<option value=""></option>
<option value="KO">Korea</option>
<option value="CN">China</option>
<option value="JP">Japan</option>
</select>
<select id="select2" style="display: none;">
<option value="">서울</option>
<option value="">부산</option>
<option value="">대전</option>
<option value="">제주</option>
</select>
<button type="button" onclick="doSave();">Save</button>
<br>
<script>
function changeBorder() {
var text1 = document.getElementById("text1");
if(text1.value != "green") {
text1.className = "border-green";
}
// if(text1.value == "green") {
// text1.className = "border-green";
// } else if(text1.value =="red"){
// text1.className = "border-red";
// } else {
// text1.className = "border-default";
// }
}
function showEmail(){
document.getElementById("divEmail").style.display = "";
}
function hideEmail(){
document.getElementById("divEmail").style.display = "none";
}
function doSave(){
var text1 = document.getElementById("text1");
if(text1.value =="") {
text1.className = "border-red";
alert("필수 값들을 입력하세요.");
}
console.log("doSave 실행");
}
function doChange(obj){
if(obj.value == "KO"){
document.getElementById("select2").style.display = "";
} else {
document.getElementById("select2").style.display = "none";
}
}
</script>
</body>
</html>'Javascript > 자바스크립트 제대로 배워볼래?' 카테고리의 다른 글
| 자바스크립트 제대로 배우자 (0) | 2023.03.31 |
|---|---|
| 4-04.데이터테이블 만들기 (0) | 2023.03.30 |
| 4-02.HTML 이벤트 컨트롤 (0) | 2023.03.30 |
| 4-01.HTML Element 컨트롤 (0) | 2023.03.30 |
| 3-17.정규식(RegExp) (0) | 2023.03.30 |