- select
- multiple
- checkbox
- radio
- append
- point-events
1) select
<body>
<select>
<option>고양이</option>
<option>야옹이</option>
<option>애옹이</option>
<option>냥냥이</option>
<option>양옹잉</option>
</select>
<p>
선택 : xx
</p>
<script>
let sel = document.querySelector('select');
let p = document.querySelector('p');
sel.addEventListener('change', e=>{
let current = e.currentTarget;
let options = current.options;
let idx = current.selectedIndex;
console.log(options);
p.textContent = `선택 : ${options[idx].textContent}`;
})
</script>
</body>
select option index값을 이용해 선택한 option을 출력할 수 있다.
2) multiple
<body>
<select multiple>
<option>고양이</option>
<option>야옹이</option>
<option>애옹이</option>
<option>냥냥이</option>
<option>양옹잉</option>
</select>
<p>
선택 : xx
</p>
<script>
let sel = document.querySelector('select');
let p = document.querySelector('p');
sel.addEventListener('change', e => {
let current = e.currentTarget;
let options = current.options;
let idx = current.selectedIndex;
let arr = [];
for (const item of options) {
if (item.selected) {
arr.push(item.textContent)
}
}
console.log(arr)
p.textContent = `선택 : ${arr.join(',')}`;
})
</script>
</body>
select에 multiple을 추가하면 스크롤 방식으로 나오게 된다.
for of를 사용해서 복수 선택 시 모두 출력되도록 해 보았다.
3) checkbox
<body>
<div>
<input type="checkbox" name="chk1" value="고양이" checked>고양이
<input type="checkbox" name="chk2" value="야옹이">야옹이
<input type="checkbox" name="chk3" value="애옹이">애옹이
<input type="checkbox" name="chk4" value="냥냥이">냥냥이
<input type="checkbox" name="chk5" value="양옹잉">양옹잉
</div>
<p>xxx</p>
<script>
'use strict';
let input = document.querySelectorAll('input');
let p = document.querySelector('p');
let arr =[];
input.forEach(item=>{
item.addEventListener('change', e=>{
if(e.currentTarget.checked){
arr.push(e.currentTarget.value)
console.log(arr);
p.textContent = `선택 : ${arr}`;
}
})
})
</script>
</body>
checkbox의 경우 checked와 value를 이용하면 체크가 된 checkbox의 value값을 뽑아낼 수 있다.
4) radio
<body>
<div>
<input type="radio" name="ani" value="고양이">고양이
<input type="radio" name="ani" value="야옹이">야옹이
<input type="radio" name="ani" value="애옹이">애옹이
<input type="radio" name="ani" value="냥냥이">냥냥이
<input type="radio" name="ani" value="양옹잉">양옹잉
</div>
<p>xxx</p>
<script>
'use strict';
// let rad = document.querySelectorAll('input');
let rad = document.querySelectorAll('[name=ani]');
// input의 name이 ani인 것들만
let p = document.querySelector('p');
rad.forEach(element => {
element.addEventListener('change', e=>{
if(e.currentTarget.checked){
p.textContent = e.currentTarget.value;
} else {
p.textContent = '';
}
})
});
</script>
</body>
radio는 선택이 하나만 가능하기 때문에 출력도 하나만 된다.
let rad = document.querySelectorAll('input');
let rad = document.querySelectorAll('[name=ani]');
input의 name이 ani로 모두 같기 때문에 똑같이 사용할 수 있다.
5-1) append
<body>
<input type="text" class="text">
<button>추가</button>
<ul>
<!-- <li>xxx</li> -->
</ul>
<script>
'use strict';
let inp = document.querySelector('input');
let ul = document.querySelector('ul');
let li = '';
let btn = document.querySelector('button');
let txt = '';
btn.addEventListener('click', e => {
txt = inp.value;
inp.value = '';
li = document.createElement('li')
li.textContent = txt;
ul.append(li);
inp.focus();
})
</script>
</body>
input에 텍스트를 넣으면 value에 저장이 된다. 그 값을 추가한 요소 li안에 넣은 뒤 ul에 append를 해 추가를 하면 위 사진처럼 li가 추가가 된다.
5-2) append 예제
<body>
<input type="text" class="text">
<button class="btn1">추가</button>
<button class="btn2">출력</button>
<button class="btn3">원본출력</button>
<p></p>
<ul>
</ul>
<script>
'use strict';
let inp = document.querySelector('input');
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let btn3 = document.querySelector('.btn3');
let p = document.querySelector('p');
let ul = document.querySelector('ul');
let arr = [];
let arr1 = [];
let txt = [];
let li = document.querySelectorAll('li');
btn1.addEventListener('click', e => {
txt = inp.value;
inp.value = '';
arr.push(txt);
arr1 = arr.concat();
p.textContent = arr;
})
btn2.addEventListener('click', e => {
for (let i = 0; i < arr.length; i++) {
li = document.createElement('li')
li.textContent = arr[i];
ul.append(li);
li.addEventListener('click', e => {
e.currentTarget.remove();
arr1 = arr1.filter(x => x !== arr[i]);
p.textContent = arr1;
})
}
})
btn3.addEventListener('click', e => {
p.textContent = arr;
for (let i = 0; i < arr.length; i++) {
li = document.createElement('li')
li.textContent = arr[i];
ul.append(li);
li.addEventListener('click', e => {
e.currentTarget.remove();
arr1 = arr1.filter(x => x !== arr[i]);
p.textContent = arr1;
})
}
})
</script>
</body>
input에 텍스트를 넣은 뒤 추가 버튼을 누르면 밑에 있는 p에 쌓이게 된다.
그 후에 출력을 누르면 이전 방식과 같이 li가 추가되도록 했다.
그리고 filter를 사용해서 li를 클릭하면 arr 배열을 복사한 arr1의 li가 remove 되고 p에 있는 text 또한 제거가 된다.
마지막으로 btn3 변수로 저장한 원본출력 버튼을 누르면 원본 배열인 arr을 다시 출력하게 된다.
6) point-events
<style>
.box {
width: 600px;
height: 400px;
border: 1px solid #000;
margin: 50px;
position: relative;
}
.box p {
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
font-size: 50px;
text-align: center;
line-height: 5;
}
.box span {
position: absolute;
left: 0;
top: 0;
display: block;
width: 600px;
height: 400px;
background: tan;
opacity: 0.5;
/* pointer-events: auto; */
pointer-events: auto;
}
</style>
</head>
<body>
<div class="box">
<p>pointer-events</p>
<span></span>
</div>
<script>
'use strict';
let p = document.querySelector('p')
p.addEventListener('click', e=>{
alert('test');
})
</script>
</body>
p위에 opacity가 적용되어 있는 span을 위에 덮게 되면 p에 걸린 이벤트가 발생하지 않는다.
이럴 땐 span에 pointer-events를 사용해 이벤트 제어를 해야 된다.
.box span {
position: absolute;
left: 0;
top: 0;
display: block;
width: 600px;
height: 400px;
background: tan;
opacity: 0.5;
/* pointer-events: auto; */
pointer-events: none;
}
