Блог

Я пробую этот код.

 <p id="demo"></p>
<img id="image1" src="img-170-intro-1.png" alt="intro1">
<script>
    function myFunction1() {
        document.getElementById("demo").innerHTML = "Hello World";
        document.getElementByID("image1").src = 'img-170-intro-1.png';
    }   
    function myFunction2() {
        document.getElementById("demo").innerHTML = "Bye World";
        document.getElementByID("image1").src = 'img-170-intro-2.png';
    }
</script>
<button onclick="myFunction1()">Click me</button>
<button onclick="myFunction2()">Click me</button>
 

и тексты меняются, но изображения-нет. Как мне решить эту проблему?

Ваш идентификатор document.getElementBy неверен, это должен быть идентификатор document.getElementBy, в котором вы устанавливаете src изображения.

 <script>
    function myFunction1() {
        document.getElementById("demo").innerHTML = "Hello World";
        document.getElementById("image1").src = 'img-170-intro-1.png'; //Here
    }   
    function myFunction2() {
        document.getElementById("demo").innerHTML = "Bye World";
        document.getElementById("image1").src = 'img-170-intro-2.png'; //Here
    }
</script>
 

В обеих этих строках : document.getElementByID("image1").src = 'img-170-intro-2.png';
document.getElementByID("image1").src = 'img-170-intro-2.png';

просто замените getElementById на getElementById, и ваш код готов к работе. Вы просто использовали заглавную букву D вместо маленькой буквы d в приведенной выше функции. Кроме того, эти ошибки могут быть большой проблемой для обнаружения невооруженным глазом, поэтому я бы посоветовал вам использовать хороший редактор кода, который обнаружит такие промахи для вас. Вы можете использовать VSCode, Webstorm или Eclipse.