Перейти к содержимому

Пример программы на JavaScript которая меняет картинку «лампочку» и текст.

URL источник №1.
URL источник №2.

What Can JavaScript Do?

JavaScript can change HTML attribute values.

In this case JavaScript changes the value of the src (source)
attribute of an image and the content of a text element.


Off


<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source)
<br>
 attribute of an image and the content of a text element.</p>

<button onclick="changeImageAndText('https://fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua/wp-content/uploads/2023/08/image-8.png', 'On')">Turn on the light</button>

<button onclick="changeImageAndText('https://fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua/wp-content/uploads/2023/08/image-7.png', 'Off')">Turn off the light</button>
<br>

<img id="myImage" src="https://fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua/wp-content/uploads/2023/08/image-7.png" style="width:100px">
<p id="myText">Off</p>
<br>


<script>
function changeImageAndText(imageSrc, newText) {
    document.getElementById('myImage').src = imageSrc;
    document.getElementById('myText').textContent = newText;
}
</script>

</body>
</html>

Добавить комментарий