не может изменить изображение в DIV с помощью JavaScript

-2

Вот мой код:не может изменить изображение в DIV с помощью JavaScript

<!DOCTYPE html> 
<html> 

<body> 
    <script> 
    function light() { 
     if (document.getElementById("push").value == "OFF") { 
     document.getElementById("bulb").style.backgroundImage = url("1.png"); 
     document.getElementByID("push").value = "ON"; 
     } 
     else { 
     document.getElementById("bulb").style.backgroundImage = url("2.png"); 
     document.getElementByID("push").value = "OFF"; 
     } 
    } 
    </script> 
    <center> 
    <input type="button" id="push" onclick="light()" value="OFF" /> 
    <div id="bulb" style="background-image:url(2.png);width:320px;height:420px"> 
    </div>enter code here 
    </center> 
</body> 
</html>

источник

2016-09-17 Sujeet Agrahari

Когда вы задавали свой вопрос, рядом с текстовой областью была большая оранжевая коробка ** «Как форматировать **» с полезной информацией. Была также вся панель инструментов форматирования. И кнопка ** [?] ** дает возможность форматирования. * И * область предварительного просмотра, расположенная между текстовой областью и кнопкой «Опубликовать свой вопрос» (чтобы вам пришлось прокручивать ее, чтобы найти кнопку, чтобы побудить вас взглянуть на нее), показывая, как будет выглядеть ваше сообщение при публикации , Четкость вашего сообщения и демонстрация того, что вы нашли время для этого, улучшают ваши шансы получить хорошие ответы. –

javascript! = Java. –

Я исправил форматирование и удалил ненужные теги, но поскольку это ваш * третий * вопрос, я бы ожидал, что вы будете форматировать как минимум минимально к настоящему времени. –

Эта линия:

document.getElementById("bulb").style.backgroundImage = url("1.png");

пытается вызвать функцию с именем url и передать строку к нему, а затем назначьте результат этого свойства backgroundImage.

Вместо этого, вы хотите назначить строку к backgroundImage непосредственно на:

document.getElementById("bulb").style.backgroundImage = "url(1.png)"; 
// Note ------------------------------------------------^----^----^^

Пример:

document.getElementById("bulb").style.backgroundImage = "url(https://lh3.googleusercontent.com/-qJYMzFfIels/AAAAAAAAAAI/AAAAAAAAAGM/16Ir8NxI3gE/photo.jpg?sz=32)";

<div id="bulb" style="width: 32px; height: 32px"></div>

Это сказало, WOU Л.Д. лучше определить свой стиль и такое в CSS, а затем связать эти стили с элементами с помощью селекторов, например, с помощью класса ассоциации:

CSS:

.class-saying-what-the-image-represents { 
    background-image: url(1.png); 
}

JavaScript:

document.getElementById("bulb").classList.add("class-saying-what-the-image-represents");

Пример:

document.getElementById("bulb").classList.add("class-saying-what-the-image-represents");

.class-saying-what-the-image-represents { 
 
    background-image: url(https://lh3.googleusercontent.com/-qJYMzFfIels/AAAAAAAAAAI/AAAAAAAAAGM/16Ir8NxI3gE/photo.jpg?sz=32); 
 
}

<div id="bulb" style="width: 32px; height: 32px"></div>

источник

2016-09-17 17:03:34

Возможно ли, что div имеет как id, так и класс? –

@SujeetAgrahari: Конечно («div» в моем втором примере, например, после запуска кода). Он также может иметь несколько классов. –

Спасибо @ T.J. Кроудер! –

не может изменить изображение в DIV с помощью JavaScript

ответ

Смежные вопросы