HTML 태그의 텍스트 가져오기
조회수 2122회
추려서 얘기하자면 div class = "bottom" 안에 사칙연산부호랑 숫자랑해서 span class = "num" 안에 텍스트로 다 되있습니다.
그리고 div class = "top" 안에 span id = "output" 으로해서 숫자나 연산기호를 마우스로 누르면 output 칸에 입력되게 html 을 구성해놨습니다.
그리고 자바스크립트 코드에
var output = document.getElementById("output");
var bottom = document.getElementsByClassName("bottom");
bottom[0].addEventListener("click",function(){
output.innerText = bottom [0]
} )
하면 숫자나 사칙연산을 클릭하면 output 칸에 텍스트가아닌 [object 이렇게 출력이되는데, 뭐때문에이럴까요 ㅠㅠ
2 답변
-
엽토군님이 설명을 잘 해 주셨지만 이해가 어려울 수 있을 것 같아 추가 답변 남겨 봅니다.
output.innerText = bottom[0]엽토군님이 말씀하신 것처럼 위 코드에서
bottom[0]은 DOM 객체입니다.위 코드대로라면
output.innerText에 DOM 객체가 대입됩니다.때문에
output.innerText값이 [object]가 되는 것입니다.질문자님의 의도는
output.innerText에bottom[0]의 텍스트 값이 대입되는 것입니다.bottom[0]의 텍스트 값은bottom[0].innerText를 통해 구할 수 있습니다.따라서 질문자님의 의도대로 작동시키기 위해선
bottom[0]을bottom[0].innerText로 바꾼, 다음과 같은 코드가 돼야 합니다.bottom[0].addEventListener("click",function(){ output.innerText = bottom[0].innerText } )답변이 도움되셨길 바랍니다!
-
(•́ ✖ •̀)
알 수 없는 사용자
-
-
- JS 데모는 codepen 같은 곳에 올려주시면 매우 도움이 됩니다.
getElementsByClassName()은 DOM 객체의 목록을 반환하며, 따라서 이 맥락에서bottom[0]은 하나의 DOM 객체입니다. 그걸.innerText로 대입하려고 하면 당연히 오브젝트가 주입됩니다.
bottom[0]안에 있는span의innerText를 대입하셔야 할 겁니다.
댓글 입력