getElementById와 getElementsByClassName 사용법에 대해 질문드립니다.
본문
안녕하세요
항상 sir 고수님들의 많은 도움을 받고있는 회원입니다.
정말 감사드립니다.
다름이아니라 한 부분이 막혀 질문드리게되었는데요
getElementById와 getElementsByClassName 사용법에 대해 질문드립니다.
<script>
function replace_id(){
var txt = document.getElementById('area_replace_<?= $data["c_idx"] ?>').value;
txt = txt.replace(/\n$/g, '');
document.getElementById('area_replace_<?= $data["c__idx"] ?>').value = txt;
}
</script>
이 스크립트는 공백을 제거해주는 스크립트인데요
getElementById로 짜여진 스크립트입니다.
아무 이상없이 잘 작동합니다.
<script>
function replace_class(){
var txt = document.getElementsByClassName('area_replace_<?= $data["c_idx"] ?>').value;
txt = txt.replace(/\n$/g, '');
document.getElementsByClassName('area_replace_<?= $data["c_idx"] ?>').value = txt;
}
</script>
이 스크립트는 위와 동일한 기능을 하는 소스입니다.
getElementsByClassName로 class를 지정해주려는데
작동을 하지 않습니다.
혹시 getElementsByClassName로 바꾸는도중 잘못 사용한 부분이 있을까요?
고수님들의 많은 조언 부탁드립니다.
답변 3
<script>
// 공백 제거 아님. 어쨌거나 area_replace_고유번호 클래스명이 1개만 존재할 때…
function replace_class(){
var txt = document.getElementsByClassName('area_replace_<?= $data["c_idx"] ?>')[0].value;
txt = txt.replace(/\n$/g, '');
document.getElementsByClassName('area_replace_<?= $data["c_idx"] ?>')[0].value = txt;
}
</script>
BiHon님 답변 감사드립니다.
덕분에 바로 해결되었습니다.
정말 감사합니다.
편안한 저녁시간되세요^^
음. 혹시
area_replace_0 과 같은 클래스가 없는거 아닐까요?
아무래도
getElementsByName 이거나
클래스명이 area_replace 정도로 통일된 형태거나 할거 같은데
보통은
var txt = document.getElementsByClassName('area_replace_<?= $data["c_idx"] ?>').value;
가 아닌
var txts = document.getElementsByClassName('area_replace');
var txt = txts[<?php echo $data["c_idx"]?>].value;
와 같이 접근해야 하지 않을까 싶어보입니다.
플래토님 답변 감사드립니다.
바로 적용해보았는데 이상하게 작동하지를 않네요 ㅜㅜ
한 번 다시 시도해보겠습니다.
매번 정말 감사드립니다!
@클래스는영원히
바로 적용하시면 안될것이구요
실제 보시려는 클래스명을 확인하신후에 처리하셔야 합니다.
플래토님 매번 정말 큰 도움을 주셔서 감사드립니다.
해결되었습니다
편안한 저녁시간되세요^^
getElementById() 와 달리 getElementsByClassName()는 여러개가 있을 수 있기 때문에 리턴값이 배열입니다.
그래서 아래와 같이 사용합니다.
var matches = element.getElementsByClassName('colorbox');
for (var i=0; i<matches.length; i++) {
matches.item(i).classList.add('hueframe');
}
출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getElementsByClassName
취미생활님 답변 감사드립니다.
해결되었습니다.
많은 도움이 되었습니다!
편안한 저녁시간되세요^^
