JavaScript에서 버튼을 클릭하여 텍스트와 이미지를 변경하는 방법은 무엇입니까?

JavaScript를 사용하면 특정 요소에 할당된 텍스트와 img 요소에 지정된 이미지를 쉽게 변경할 수 있습니다. 버튼을 클릭할 때 이런 일이 발생하도록 HTML 문서의 버튼 요소와 함께 onclick 이벤트를 사용할 수 있습니다. 클릭 시 버튼의 텍스트를 변경하려면 onclick 이벤트에 필요한 변경을 수행하는 값으로 함수를 할당합니다.

자바스크립트를 사용하여 텍스트와 이미지를 별도로 변경하는 방법을 코드 예시를 통해 자세히 알아보세요.

요소의 텍스트 변경

JavaScript는 HTML 문서에서 요소의 텍스트를 변경하거나 가져오는 두 가지 속성을 제공합니다. 이 두 속성과 해당 기능 및 구문은 아래에 나열되어 있습니다. -

• innerText - JavaScript의 innerText 속성은 이전 텍스트를 변경하거나 HTML 문서에서 선택한 특정 요소의 이전 텍스트를 가져오는 데 사용됩니다.

문법

다음 구문은 innerText 속성을 사용하여 요소의 텍스트를 가져오고 변경하는 방법을 보여줍니다. -

으아악

• innerHTML -innerHTML 속성은 요소의 텍스트와 그 안에 사용된 모든 하위 태그를 제공할 뿐만 아니라 요소의 텍스트와 그 안에 사용된 하위 태그를 새 텍스트로 변경합니다.

문법

다음 구문은 innerHTML 속성을 사용하여 요소의 텍스트를 가져오거나 변경하는 방법을 보여줍니다. -

으아악

코드 예제의 실제 구현을 통해 이 두 가지 속성을 이해해 봅시다 -

알고리즘

• 1단계 - 첫 번째 단계에서는 HTML 문서에 입력 요소를 추가합니다. 이렇게 하면 사용자가 입력한 텍스트로 다음 단락의 텍스트를 변경할 수 있습니다.

• 2단계 - 이 단계에서는 함수를 값으로 사용하고 사용자가 버튼을 클릭하고 단락의 텍스트를 변경할 때 호출하는 onclick 이벤트와 연결된 버튼 라벨을 추가합니다.

• 3단계 - 다음 단계에서는 사용자가 입력한 입력 텍스트를 가져오고 innerText 및 innerHTML 속성을 사용하여 페이지 단락 아래의 텍스트를 변경하는 JavaScript 함수를 정의합니다.

예

아래 예에서는 innerText 및 innerHTML 속성을 사용하여 요소의 텍스트를 변경하는 방법을 설명합니다. -

으아악

위 예에서는 innerText 및 innerHTML 속성을 사용하여 서로 다른 두 단락의 텍스트를 변경했습니다. 이전 텍스트의 텍스트는 innerText 속성을 사용하여 변경됩니다. 동시에 후자의 텍스트는 innerHTML 속성을 사용하여 변경됩니다.

버튼 클릭 시 이미지 변경

JavaScript를 사용하여 HTML 문서의 요소 텍스트를 변경하는 방법을 논의했습니다. 아니요, 자바스크립트를 이용하여 버튼 클릭만으로 이미지를 변경하는 방법에 대해 이야기해보겠습니다.

JavaScript를 사용하면 src 속성을 사용하여 변경하고 주어진 링크의 값이나 주어진 src 속성에 있는 img 요소의 이미지 주소를 얻을 수 있습니다.

문법

다음 구문은 src 속성을 사용하여 웹 페이지의 이미지를 변경하는 방법을 보여줍니다. -

으아악

이제 JavaScript 코드 예제를 통해 src 속성으로 이미지를 변경하는 실제 구현을 이해해 보겠습니다. -

알고리즘

• 1단계 - 첫 번째 단계에서는 src 속성에 초기 값이 포함된 img 요소를 HTML 문서에 추가합니다. 이 요소는 나중에 src 속성의 도움으로 JavaScript를 사용하여 변경할 것입니다.

• 2단계 - 다음 단계에서는 버튼을 클릭할 때 함수를 호출하는 onclick 이벤트가 있는 버튼 요소를 추가합니다.

• 3단계 - 이 단계에서는 JavaScript 함수를 정의하고 그 안에 있는 img 요소를 해당 ID로 가져옵니다.

• 4단계 - 마지막 단계에서는 src 속성을 사용하여 src 속성의 값을 변경하고 새 값을 할당하여 웹 페이지에 새로운 이미지를 표시합니다. 버튼을 클릭할 때마다 사용자는 클릭할 때마다 두 이미지 간에 전환됩니다.

예

아래 예시에서는 src 속성의 이전 값과 웹 페이지의 이전 이미지를 대체하여 src 속성을 새로운 값으로 대체하는 방법을 설명합니다 -

으아악

위 예에서는 src 속성을 사용하여 img 요소의 src 속성 값과 웹 페이지의 실제 이미지를 변경하고 있습니다.

이 기사에서는 JavaScript를 사용하여 웹 페이지에서 요소의 텍스트를 변경하는 두 가지 방법과 각 방법에 대한 코드 예제를 통해 웹 페이지에서 이미지를 변경하는 방법을 자세히 살펴보았습니다. 이 예제는 JavaScript에 대한 실질적인 지식을 향상시키는 데 도움이 됩니다.

위 내용은 JavaScript에서 버튼을 클릭하여 텍스트와 이미지를 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!