이 글은 코딩초보가 작성한 글입니다. 간단한 참고만 하시길 바랍니다.
일단 간단히 onchange와 onclick에 대해서 설명하자면,
onchange는 이벤트가 변경됐을때 작동하는 함수이고,
onclick은 이벤트가 클릭됐을때 작동하는 함수이다.
내가 만든 파일은 이렇다.
→ select의 option중 하나를 선택하면,
▶ 'Val의 값'의 text
▶ '텍스트 값'의 text
▶ 홀수인지 짝수인지 선택
▶ radio 중 텍스트명과 일치하는 숫자
가 변경되고 홀수와 짝수를 제외하곤 다른 값들 또한 나머지 값들을 변환한다.
거기에 해당 되는 값 이외에 다른 걸 입력했을때, ('Val의 값', '텍스트 값' 기준)
오류를 표하는 alert창과 새로고침을 하는 코드를 넣었는데,
이는 굳이 필요 없을 뿐더러 코드가 깔끔하지 않으니 참고만 한다.
먼저 html파트의 <body> 부분이다.
<body>
<select id="textOption" onchange="selectFx()">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
<option value="5">text5</option>
</select>
<br><br>
Val의 값 : <input type="text" id="valText" onchange="valFx()"> <br>
텍스트 값: <input type="text" id="textText" onchange="textFx()">
<br><br>
<div onclick="checkboxFx()">
<label><input type="checkbox" id="odd">홀수</input></label>
<label><input type="checkbox" id="even">짝수</input></label>
</div>
<br>
<form name="radioForm" onclick="radioFx()">
<label><input type="radio" name="radioOption" value="1">1</label>
<label><input type="radio" name="radioOption" value="2">2</label>
<label><input type="radio" name="radioOption" value="3">3</label>
<label><input type="radio" name="radioOption" value="4">4</label>
<label><input type="radio" name="radioOption" value="5">5</label>
</form>
</body>
위 코드는 다음과 같이 출력된다:
위 HTML 코드를 보면 다음과 같은 함수가 있다:
- select-option 부분에 selectFx() 함수
- 'Val의 값', '텍스트 값' 부분에 valfFx(), textFx() 함수
- checkbox에 checkboxFx() 함수
- radio에 radioFx() 함수
이를 주시하고 다음의 Javascript 코드를 보면 이해하기 편하다.
<script type="text/javascript">
//select-option 파트의 onchange 함수
function selectFx() {
var opt = document.getElementById("textOption");
var optVal = opt.options[opt.selectedIndex].value;
var optText = opt.options[opt.selectedIndex].text;
var valt = document.getElementById("valText");
var texx = document.getElementById("textText");
valt.value = optVal;
texx.value = optText.toLowerCase();
checkFx();
}
//val 파트의 onchange 함수
function valFx() {
var valt = document.getElementById("valText");
var opt = document.getElementById("textOption");
opt.selectedIndex = valt.value - 1;
//1 ~ 5가 아닐때 alert창 뜨고 새로고침하는 if문
if (!(valt.value >= 1 && valt.value <= 5)){
alert("Val값은 최소 1, 최대 5만 가능합니다");
history.go();
}
var texx = document.getElementById("textText");
texx.value = opt.options[opt.selectedIndex].text;
checkFx();
}
//text 파트의 onchange 함수
function textFx() {
var texx = document.getElementById("textText");
texx.value = texx.value.toLowerCase();
var opt = document.getElementById("textOption");
opt.selectedIndex = texx.value.substring(4, 5) - 1;
var valt = document.getElementById("valText");
valt.value = opt.value;
//text1 ~ 5가 아닐때 alert창 뜨고 새로고침하는 if문
if(texx.value != "text1","text2","text3","text4","text5"){
alert("텍스트값은 text1 ~ text5 만 가능합니다.");
history.go();
}
checkFx();
}
//checkbox와 radiobox의 값을 설정해주는 함수
function checkFx() {
var opt = document.getElementById("textOption");
if (opt.value % 2 == 0) {
document.getElementById("odd").checked = false;
document.getElementById("even").checked = true;
}
else {
document.getElementById("odd").checked = true;
document.getElementById("even").checked = false;
}
var radioArray = document.getElementsByName("radioOption");
for (var i = 0; i < radioArray.length; i++) {
if (radioArray[i].value == opt.value) {
radioArray[i].checked = true;
}
}
}
//radio 파트의 onclick 함수
function radioFx() {
var opt = document.getElementById("textOption");
var valt = document.getElementById("valText");
var texx = document.getElementById("textText");
radioArray = document.radioForm.radioOption;
for (var i = 0; i < radioArray.length; i++) {
if (radioArray[i].checked) {
opt.value = radioArray.value;
valt.value = radioArray.value;
texx.value = opt.options[opt.selectedIndex].text;
}
if (opt.value % 2 == 0) {
document.getElementById("odd").checked = false;
document.getElementById("even").checked = true;
}
else {
document.getElementById("odd").checked = true;
document.getElementById("even").checked = false;
}
}
}
function checkboxFx(){
alert("다른 선택지를 먼저 진행해주세요.")
history.go();
}
</script>위 javascript 코드를 적용한 결과물은 다음과 같다.
'dev > javascript' 카테고리의 다른 글
| [Javascript] 간단한 확인메시지 alert (0) | 2020.12.03 |
|---|---|
| [jQuery] jQuery란 무엇인가? (0) | 2019.10.15 |
