사용자 상호 작용을 기반으로 JavaScript를 사용하여 div의 콘텐츠를 동적으로 변경하려면 어떻게 해야 합니까?-JS 튜토리얼-php.cn

사용자 상호 작용을 기반으로 JavaScript를 사용하여 div의 콘텐츠를 동적으로 변경하려면 어떻게 해야 합니까?

Susan Sarandon

풀어 주다： 2024-10-29 10:54:29

원래의

710명이 탐색했습니다.

How do I dynamically change the content of a div using JavaScript based on user interaction?

JavaScript를 사용하여 Div의 콘텐츠를 변경하는 방법

JavaScript는 웹 페이지의 요소를 조작하는 다양한 방법을 제공합니다. div의 내용을 변경합니다. 간단한 JavaScript 코드를 사용하여 이를 달성할 수 있는 방법을 살펴보겠습니다.

다음 HTML 코드를 고려하세요.

<code class="html"><html>
<head>
  <script type="text/javascript">
    function changeDivContent() {
      // ...
    }
  </script>
</head>
<body>
  <input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">
  <input type="radio" name="radiobutton" value="B" onClick="changeDivContent()">
  <div id="content"></div>
</body>
</html></code>

로그인 후 복사

이 코드에는 두 개의 라디오 버튼(A 및 B)과 div가 있습니다. "content"라는 ID를 사용합니다. 목표는 라디오 버튼 중 하나가 선택될 때 "content" div의 콘텐츠를 변경하는 것입니다.

이를 달성하기 위해 콘텐츠 요소의 innerHTML 속성을 사용할 수 있습니다. 방법은 다음과 같습니다.

<code class="javascript">document.getElementById("content").innerHTML = "whatever";</code>

로그인 후 복사

"A" 또는 "B" 라디오 버튼을 선택하면changeDivContent() 함수가 호출됩니다. 이 함수에서는 콘텐츠 요소의 innerHTML 속성을 원하는 텍스트로 설정할 수 있습니다. 예:

<code class="javascript">function changeDivContent() {
  if (document.getElementById("radiobuttonA").checked) {
    document.getElementById("content").innerHTML = "Content for A";
  } else if (document.getElementById("radiobuttonB").checked) {
    document.getElementById("content").innerHTML = "Content for B";
  }
}</code>

로그인 후 복사

이 코드는 어떤 라디오 버튼이 선택되었는지 확인하고 이에 따라 "content" div의 콘텐츠를 변경합니다. 표시하려는 텍스트로 innerHTML 값을 사용자 정의할 수 있습니다. 이 기술을 사용하면 사용자 상호 작용에 따라 div의 콘텐츠를 동적으로 변경하여 더욱 대화형 웹 페이지를 만들 수 있습니다.

위 내용은 사용자 상호 작용을 기반으로 JavaScript를 사용하여 div의 콘텐츠를 동적으로 변경하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!