javascript - Change Parent Div Background onclick form multiple Child Div li -


i trying make parent div background img change onclick wwith multiple li instances. each li should change background map of state. doing 1 instance

this works:

        <ul>             <li><div class="panel-heading" role="tab" id="statenine">                 <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#stateal" aria-expanded="false" aria-controls="stateal">alabama | </h3></div>                 </li>                 <script>function changebackground() {                         event.currenttarget.classname = ('bucketal');                 }</script>` 

this works once, fires last script instance on every button, ignoring previous. background changes last instance's background. there total # of 9 different instances. (showing 3)

<div onclick="changebackground(this)" class="bucket2">          <div class="locations">     <div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">         <div class="panel panel-default loc" style="background-color;none;">          <ul>             <li><div class="panel-heading" role="tab" id="statenine">                 <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#stateal" aria-expanded="false" aria-controls="stateal">alabama | </h3></div>                 </li>                 <script>function changebackground() {                         event.currenttarget.classname = ('bucketal');                 }</script>             <li><div class="panel-heading" role="tab" id="stateeight">                 <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#statefl" aria-expanded="false" aria-controls="statefl">florida | </h3></div>                 <script>function changebackground() {                         event.currenttarget.classname = ('bucketfl');                 }</script></li>             <li><div class="panel-heading" role="tab" id="stateseven">                 <h3 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#statega" aria-expanded="false" aria-controls="statega">georgia | </h3></div>                 <script>function changebackground() {                         event.currenttarget.classname = ('bucketga');                 }</script></li></li> 

there many posts here around have not found answer multiple instances. apologies if have missed it. appreciate may not following best practices inline html/js instances , open best/new solution.

<div id="changebackground">     <button data-class="red">     red     </button>      <button data-class="blue">     blue     </button>      <button data-class="green">     green     </button> </div> 

js

var el = document.getelementbyid("changebackground"); el.addeventlistener("click", changebackground); function changebackground(e) {         e.currenttarget.classname = e.target.getattribute('data-class'); } 

css:

.red {   background-color: red; } .green {   background-color: green; } .blue {   background-color: blue; } 

https://jsfiddle.net/ye7dy58y/


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -