Создание простой кнопки в javascript с изображениями - PullRequest
Новая
       32

Создание простой кнопки в javascript с изображениями

0 голосов
/ 05 марта 2020

Поэтому я решил применить кое-что, чему я научился из javascript, и я должен был создать изображение двух лампочек: одна светящаяся, а другая - в выключенном состоянии, и сделать для нее кнопку. Мой код HTML выглядел так: 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>    
</head>
<body>
    <button type="button" id="toggle_button">Toggle Button</button>
    <img id="bulbimage" src="BulbOff.png">
    <script src='main.js'></script>
</body>
</html>

И мой код javascript выглядел так: 

let bulb_status = document.getElementById('bulbimage');
let toggle_button = document.getElementById('toggle_button')

toggle_button.addEventListener('click', function() {
    switch(bulb_status.src)
    {
        case "BulbOff.png":
            bulb_status.src='BulbOn.png';
            break;
        case "BulbOn.png":
            bulb_status.src='BulbOff.png';
            break;
    }
}
);

Я использовал оператор switch, но он не работал. Я следил за форумом кнопок переключения с здесь , но я все еще не могу понять это правильно.

В чем причина проблемы? И как это исправить?

...