[HTML] Button text 바꾸기

 

<주제>

  - HTML에서 버튼을 눌렀을 때 버튼 내부의 text가 바뀌도록 해보자

 

---

 

<설명>

  - 다른 블로그나 stackoverflow 보면 js 파일에서 다음과 같이 하라고 한다.

const btnElement = document.getElementByID('버튼');

btnElement.innerText = 'Not Changed';

btnElement.innerHTML = 'Not Changed';

btnElement.value = 'Not Changed';

btnElement.addEventListener('click', function() {
	btnElement.innerText = 'Not Changed';
});

    ==> String 값에 Not Changed 라고 쓴 건, 저 모든게 안 먹혀서 그렇다.

 

  - 먹히는 code를 찾았으니 이걸 써보자.

document.getElementById('버튼').onclick = function() {
	this.textContent = 'Changed';
};

    ==> 다른 내장 함수 innerText, innerHTML 과 달리 textContent 값이 HTML 구문 분석이 되지 않기에 성능이 더 좋고 XSS 공격 방지도 된다고 한다.

 

---

 

<출처 1> https://www.techiedelight.com/ko/change-text-button-with-javascript/

<출처 2>