Paint the element inside the button

Question

Hello, there are three buttons, click on it, a circle is painted in some color, how can this be done?

I am quite a novice, I started doing it as follows, but then I got up in a stupor. On when you need to refer to this to color the button on which the event occurred.

But one moment, you need to paint not the button itself, but an absolutely positioned element inside it, i.e. circle;

Here is the code:

 var btn = document.querySelectorAll('.button'); var change = document.getElementsByClassName('change-element'); function test(){ for (var index = 0; index<change.length; index++) { change[index].style.backgroundColor="black"; } } for (var i = 0; i<btn.length; i++) { btn[i].addEventListener("click", test); }

C.Raf.T C.Raf.T 3,954 one 6 nineteen · Answer 1 · 2016-09-07T13:18:18

Maybe so:

 var btn = document.querySelectorAll('.button'); function test() { this.getElementsByClassName('change-element')[0].style.backgroundColor = "black"; } for (var i = 0; i < btn.length; i++) { btn[i].addEventListener("click", test); }

 ul>li { list-style: none; } .change-element { width: 50px; height: 50px; background-color: red; }

 <div> <ul> <li class="button">Button1 <span class="change-element">111</span> </li> <li class="button">Button2 <span class="change-element">111</span> </li> </ul> </div>

But both of them are painted, and only that one should click on)

Nicolas Chabanovsky ♦ 38.2k 54 220 437 · Answer 2 · 2016-09-07T14:11:21

Resolved:

 var btn = document.querySelectorAll('.button'); var change = document.getElementsByClassName('change-element'); function test(){ for (var index = 0; index<change.length; index++) { change[index].style.backgroundColor="#95a5a6"; } this.getElementsByClassName('change-element')[0].style.backgroundColor="red"; } for (var i = 0; i<btn.length; i++) { btn[i].addEventListener("click", test); }

Isn't it better to hang the event on a container and then check the event.target?

Paint the element inside the button

2 answers 2

More articles: