getelementbyid에서 classname으로 변경 질문

getelementbyid에서 classname으로 변경 질문

QA

getelementbyid에서 classname으로 변경 질문

본문

textarea 의 값에 다라 높이가 자동으로 조절되는 것을 적용하고 있습니다.

id 방식으로 사용하려고 했으나 wr_content 뿐만 아니라 wr_subject_[i], wr_[i] 이런식으로 id값이 1씩 증가하고 있는데요. get id는 한개의 값만 담는다고 해서 하단 코드는 다른곳엔 적용될 수 없더라고요.

그래서 className 을 활용해서 바꿔보려하는데 단순히 id 영역만 교체한다고 해서 자꾸 오류가 나네요 ㅠㅠ 도움 부탁드립니다 

 


function autoResize() {
    for (var i = 0; i <= 20; i++) {
    let textarea = document.getElementById("wr_content_" + i);
   
        textarea.style.height = "0px";
 
        let scrollHeight = textarea.scrollHeight;
        let style = window.getComputedStyle(textarea);
        let borderTop = parseInt(style.borderTop);
        let borderBottom = parseInt(style.borderBottom);
 
        textarea.style.height = (scrollHeight + borderTop + borderBottom)+"px";
    }
}
    window.addEventListener("load", autoResize);
    window.onresize = autoResize;
 

이 질문에 댓글 쓰기 :

답변 1


<script>
function autoResize() {
    this.style.height = "0px";

    let scrollHeight = this.scrollHeight;
    let style = window.getComputedStyle(this);
    let borderTop = parseInt(style.borderTop);
    let borderBottom = parseInt(style.borderBottom);
 
    this.style.height = (scrollHeight + borderTop + borderBottom)+"px";
}
 
function init() {
    Array.from(document.getElementsByClassName('ta')).forEach((el, i) => {
        el.addEventListener('input', autoResize, false);
        el.addEventListener('focus', autoResize, false);
    });
}
 
window.addEventListener("load", init);
// window.onresize = autoResize;
</script>
 
<textarea class="ta"></textarea>
<textarea class="ta"></textarea>
<textarea class="ta"></textarea>

답변 감사합니다. 베르만님. 소스를 적용해보았는데 페이지가 새로고침될 당시에는 textarea높이를 계산을 못하고 한줄로 나오고 마우스로 클릭하여 활성화가 되는 순간 높이값이 변동되네요. 제 설명이 조금 부족했던 탓인지 구현하고자 하는 것은 글이 수정되었을 때 즉 비활성화 상태일때도 높이값을 자동으로 가져오고싶은것입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 121
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT