innerHTML 연습 1

<h1 class = "display">Hello</h1>
<input class="inputbox" type="text">
<button class="button">Change ME</button>
<script>
    const displayElement = document.querySelector('.display')
    const button = document.querySelector('button')
    const inputbox = document.querySelector('.inputbox')
    button.onclick = () => {
        const newValue = inputbox.value
        displayElement.innerHTML = newValue
    }
// Create an input, h1 and submit button
// Add a class to all three elements and target them using querySelector
// When button is clicked, set the innerText of the h1 tag to the input value

</script>

 

위의 코드는

button을 onclick하는 이벤트가 있을 경우,

아래의 문구를 실행한다.

 

아래의 문구. 즉, onclick 내부에는 innerHTML가 있음을 볼 수 있는데

이 기능은 HTML에게 동적인 환경을 제공한다고 할 수 있겠다.

 

displayElement와 HTML의 h1는 querySelector로 연결되어있고,

innerHTML에 의해 문자열이 h1 태그 안에 HTML로 전달된다.

 

---

 

솔직히 innerHTML을 지금 사용하고 있냐?

라고 하면 잘 모르겠다.

아마도 효율적이고 좋은 프레임워크들이 많이 나와서 자바스크립트 기본 문법은 많이 사장되었을 것이다.

그럼에도 배우고 있는 이유는

내가 공부하고 있는 사이트에서 Oldschool way를 강조하기 때문...

 

일단 쭉 파보아야겠다.