Change color of single class element just clicked


(strmiska) #1

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.

 array[3].style.fill = malen.style.backgroundColor;

but i want to color the classObject, that´s just clicked, something like array[this]
is this possible??


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

This seems like too easy of a solution, but maybe the Hype “element” parameter would work.

As an example…
https://photics.com/free-template-tuesday-11-tumult-hype-multilingual/

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.


(strmiska) #3

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.


(Hans-Gerd Claßen) #4

Hi strimska,

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 …

have a look over here:


(strmiska) #5

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)


(Hans-Gerd Claßen) #6

ok,

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.

should work, good luck :slight_smile:

btw. no need to split of the svgs into parts!


(strmiska) #7

great!! works excellent! thanks a lot :grin: