Как с помощью vanillaJs сделать подобное?

Question

[BB 8]

На днях изучил SVG и приступил к всевозможным играм с ним, но т.к. DOM я знаю лишь поверхностно, прошу помощи в решении проблемы, которая лежит здесь:

JsFiddle

Есть 3 кнопки, которые переключают слои SVG и есть обычные div'ы с различными цветами, которые при нажатии должны менять цвет выбранного слоя.
Как сделать так, чтобы при выборе слоя SVG, менялся цвет только выбранного слоя и, соотвественно, если переключаться между слоями, чтобы предыдущий становился прозрачным ?

Comments

[Dark Hole]

На днях изучил SVG

DOM я знаю лишь поверхностно

Странные у вас приоритеты... Должно быть наоборот.

[BB 8]

Dark Hole: Почему ??

[Dark Hole]

BB 8: потому, что DOM это основополагающая вещь. В любом случае, в браузере. А SVG, тем более, управление ним - нет, и даже наоборот, зависит от дома.
К тому же, ваша "проблема" ни к DOM, ни к SVG не имеет отношения. Даже к JS довольно косвенно относится. Это базовая задача - запомнить, какой элемент выбран и на основе этого менять функциональность. Пиши бы вы на Java, C++ или даже Pascal, задача бы даже не поменялась.

[BB 8]

Dark Hole: Я ж в шапке подметил, что в DOM только начинаю разбираться и, соответственно, имелось в виду, что JS начал изучать только недавно! НО мне просто стало интересно, как решается подобная задача. Как говорится: "Критикуешь - предлагай". Что бы Вы могли мне посоветовать(статьи/книги) для обогащения понимания в программировании ?

[Dark Hole]

BB 8: learn.javascript.ru для изучения, MDN в качестве документации и Флэнагана в качестве книги.

Answer 1

[Николай]

Самый простой вариант - хранить где-то текущий выбранный слой и текущий активный цвет. Для простоты - в глобальных переменных.
При клике на выбор слоя обновляем эту переменную и устанавливаем ей активный цвет, остальным слоям цвет ставим прозрачный.
При клике на цвет берем значение активного слоя и меняем его цвет.

Comments

[BB 8]

window.onload = function(){

	var 	vnu = document.getElementById('vnu_potolok'),
		vne = document.getElementById('vne_potolok'),
		pol = document.getElementById('pol'),
		tr_vnu = document.getElementById('tr_vnu'),
		tr_vne = document.getElementById('tr_vne'),
		tr_pol = document.getElementById('tr_niz');

		tr_vnu.onclick = function() {
			vnu.style.fill = "none";
			vne.style.fill = "none";
			pol.style.fill = "none";

			document.getElementById("cl1").onclick=function(){
				vnu.style.fill = "green";
			}
			document.getElementById("cl2").onclick=function(){
				vnu.style.fill = "red";	
			}
			document.getElementById("cl3").onclick=function(){
				vnu.style.fill = "black";
			}
			document.getElementById("cl4").onclick=function(){
				vnu.style.fill = "white";
			}
			document.getElementById("cl5").onclick=function(){
				vnu.style.fill = "cyan";
			}
		}

		tr_vne.onclick = function() {
			vnu.style.fill = "none";
			vne.style.fill = "none";
			pol.style.fill = "none"
			document.getElementById("cl1").onclick=function(){
				vne.style.fill = "green";
			}
			document.getElementById("cl2").onclick=function(){
				vne.style.fill = "red";	
			}
			document.getElementById("cl3").onclick=function(){
				vne.style.fill = "black";
			}
			document.getElementById("cl4").onclick=function(){
				vne.style.fill = "white";
			}
			document.getElementById("cl5").onclick=function(){
				vne.style.fill = "cyan";
			}
		}

		tr_pol.onclick = function () {
			vnu.style.fill = "none";
			vne.style.fill = "none";
			pol.style.fill = "none"
			document.getElementById("cl1").onclick=function(){
				pol.style.fill = "green";
			}
			document.getElementById("cl2").onclick=function(){
				pol.style.fill = "red";	
			}
			document.getElementById("cl3").onclick=function(){
				pol.style.fill = "black";
			}
			document.getElementById("cl4").onclick=function(){
				pol.style.fill = "white";
			}
			document.getElementById("cl5").onclick=function(){
				pol.style.fill = "cyan";
			}
		}
};

Вот так вот работает полностью, но у меня вопрос: с точки зрения правильности - это правильное решение?

[Николай]

Нет.
Вы каждый раз перевешиваете обработчик - это очень плохо.
Я же вам предложил способ.
заводим глобальную переменную var currentLayer = null;
Вешаем на обработчики слоев функцию типа такой:

function onLayerClick() {
    currentLayer = vnu // ещё два для vne и pol;
}

На обработчики цвета вешаем такую:

function onColorClick() {
    clearLayers();
    if (currentLayer) {
        currentLayer.style.fill = "green"; // для других цветов тоже самое.
    }
}
function clearLayers() {
    vnu.style.fill = "none";
    vne.style.fill = "none";
    pol.style.fill = "none"
}

p.s. в том виде что я написал получится всё равно очень громоздко и некрасиво. Чтобы написать красиво надо научиться хотя бы писать функции, которые возвращают функцию, например для цветов можно сделать так:

function onColorClick(color) {
    return function() {
         if (currentLayer) {
            currentLayer.style.fill = color; 
         }
    }
}

И на каждый элемент вешать уже просто element.onclick = onColorClick("green" /* red, ... */ );
Другой вариант - использовать делегирование, тут это вполне уместно.
Почитайте побольше про события, что такое делегирование, как работать с циклами, это очень поможет.