i want to change the color for a single class element, when it is clicked.
var array = document.getElementsByClassName('st0');
for (var i=0; i < array.length; i++) {
var malen = hypeDocument.getElementById("mal");
array[i].style.fill = malen.style.backgroundColor;
};
if i use this, all classObjects are colored.
i also can call a single classObject.
I use element.id to get the ID name of the element that was clicked. In the example, I’m changing text. But if the ID is known, then it’s easy to change that element’s color too.
thanx. yes, using id, i know that.
i have to color up to 100 objects,
but not all together. single coloring.
so using id would be very annoying.
thank you.
it's a bit confusing, so that may be the reason you've got no solution so far ...
seems you're working with svg ?! and added eventlisteners to the svg-elements (class = st0) ...
in that case the event will have a target when fired ...
yes @h_classen - you´re right. i try to color svg for a childrens paint programm.
it works perfect, if every polygon gets an ID. but therefore also every path has to get its own function.
and this would be heavy using 100 polygons.
for better understanding - this is what i do now and it´s working: malenClass.hype.zip (918,4 KB)
i’d say delete all those functions responsible for filling each element.
on sceneload do:
var svgEls = document.getElementsByClassName('st0');
for (var i=0; i < svgEls.length; i++) {
['click', 'touchstart'].forEach(event => svgEls[i].addEventListener(event, fillWithColor));
};
function fillWithColor(e){
e.target.style.fill = hypeDocument.getElementById("mal").style.backgroundColor;
}
assuming every target-svg-element has a class of ‘st0’ the above attaches eventlisteners for click- and touchstart on those, that’ll execute the fillWithColor-function.
