JavaScript를 사용하여 Div 콘텐츠를 동적으로 업데이트하는 방법: 라디오 버튼을 사용하는 가이드

JavaScript로 Div 콘텐츠를 변경하는 방법

JavaScript를 사용하여 div 요소의 콘텐츠를 수정하는 것은 웹 개발에서 일반적인 작업입니다. 이 문서에서는 div에 "값" 속성이 없더라도 관련 단계를 안내합니다.

다음 HTML 코드가 있다고 가정해 보세요.

<code class="html"><div id="content"></div>
<input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent()"></code>

"A" 또는 "B" 라디오 버튼을 선택하여 div 요소의 콘텐츠를 변경합니다.

div에 대한 "값" 속성이 없으므로 요소의 innerHTML 속성을 사용할 수 있습니다. 내용을 설정합니다.

이를 수행하는 JavaScript 함수는 다음과 같습니다.

<code class="js">function changeDivContent() {
  let selectedValue = document.querySelector('input[name=radiobutton]:checked').value;
  document.getElementById("content").innerHTML = selectedValue;
}</code>

코드 분석은 다음과 같습니다.

• document.querySelector('input[ name=radiobutton]:checked')는 현재 선택된 라디오 버튼을 가져옵니다.
• value는 선택한 라디오 버튼의 값을 가져옵니다.
• document.getElementById('content').innerHTML = selectedValue 세트 콘텐츠 div의 콘텐츠를 선택한 라디오 버튼의 값으로 설정합니다.

"A" 또는 "B"를 클릭하면 이 기능이 div 요소 내부의 텍스트를 업데이트합니다.

위 내용은 JavaScript를 사용하여 Div 콘텐츠를 동적으로 업데이트하는 방법: 라디오 버튼을 사용하는 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!