Не могу понять, почему мой JS не работает

-4

Я уже возился с образцами JavaScript, и с тех пор как я редактировал этот, я не могу понять, почему он не работает. Все выглядит хорошо для меня, но вот код (JSFiddle)Не могу понять, почему мой JS не работает

https://jsfiddle.net/en2a8c1v/1/

function click(e) { 
    document.body.style.backgroundColor='" + e.target.id + "'; 

} 


document.addEventListener('DOMContentLoaded', function() { 
    var divs = document.querySelectorAll('div'); 
    for (var i = 0; i < divs.length; i++) { 
    divs[i].addEventListener('click', click); 
    } 
});

источник

2015-12-20 nicocappa

могли бы вы подробно вопрос немного больше? –

Я просто хочу знать, почему это не сработает. Я не знаю, как это сделать. – nicocappa

Вы устанавливаете цвет фона в строку ''" + e.target.id + "'', которая не является допустимым цветом. Вы можете легко это увидеть, используя отладчик, отслеживая код, изучая переменные и элементы DOM, а также используя инспектор стиля. Кстати, пожалуйста, поместите свой код в вопрос, а не на внешний сайт. –

Во-первых, убедитесь, что в настройках JS у вас есть не включен не намотка (я не использовал оберните голову) в выпадающее меню типа нагрузки.

Далее вам нужно понять, что при вызове e.target.id это уже строковая переменная. Вы буквально делаете фоновый цвет «e.target.id». Это не цвет.

Просто измените document.body.style.backgroundColor='" + e.target.id + "'; на document.body.style.backgroundColor= e.target.id;

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

источник

2015-12-20 07:15:42 Sinistralis

Большое спасибо! Я просто играю с ним, но если вы не возражаете, объясняя это, я хотел бы знать, как лучше это сделать. – nicocappa

Идентификаторы предназначены для идентификации определенного элемента dom, поэтому использование их таким образом невероятно неинтуитивно и запутанно. Вместо этого я бы рекомендовал использовать атрибуты данных. Что-то вроде data-clickColor = "red" на ваших div. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes Ниже приведено руководство по использованию атрибутов данных. Кроме того, чтобы коснуться того, что будет сказано выше, вы не должны смешивать свою таблицу стилей с вашим html. Поместите свои стили в файл CSS и соедините его с вашим html. Это может измениться с помощью JS-фреймворков, но пока не беспокойтесь об этом. – Sinistralis

А я вижу, спасибо! Я лично пишу CSS в другом файле, однако это был не мой код. Всякий раз, когда я пишу свои собственные материалы, я обязательно буду использовать атрибуты данных. У меня есть еще один вопрос, если у вас есть время.Я немного перепутал и понял, что если я просто скопирую/вставляю первую функцию и слушатель, я могу заставить другую кнопку сделать что-то другое, однако, похоже, это не так, почему это так? Вот код: https://jsfiddle.net/1190b617/4/ – nicocappa

Возможно, кто-то найдет это полезным. Использовать атрибут CSS: background-color: rgb (x, y, z);

Вы можете сделать это простым способом, например:

document.getElementById("elementID").style.backgroundColor = 'rgb('+ this.red + ', ' + this.green + ', ' + this.blue + ')';

Эти R, G, значения б могут быть, например:

this.red = 0; 
this.green = 255; 
this.blue = 130;

источник

2015-12-20 10:38:37

Не могу понять, почему мой JS не работает

ответ

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