JS возврата этикетки цвет фона

вот мой HTML:JS возврата этикетки цвет фона

<body> 
    <div class="container"> 
     <img src="2.png" /> 
     <div id="colorChange"></div> 
    </div> 

    <div class="colorChoice"> 
     <form id="colorChoiceForm"> 
      <ul id="colorListParent"> 
       <li class="noButton"> 
        <input type="radio" name="colorGroup" value="aaa12" id="aaa12" /> 
        <label style="background-color:#d21212" class="colorPick" for="aaa12"></label> 
       </li> 
       <li class="noButton"> 
        <input type="radio" name="colorGroup" value="daaa" id="daaa"/> 
        <label style="background-color:#202020" class="colorPick" for="daaa"></label> 
       </li> 
      </ul> 
     </form> 
    </div>> 
</body>

и JS:

function load() { 
    document.getElementById("colorListParent").addEventListener("click", function(e){ 
     var bgrColor = (e.target.style.backgroundColor); 
     console.log(bgrColor); 
     console.log(typeof bgrColor); 
     document.getElementById("colorChange").style.backgroundColor = bgrColor; 
    }); 
} 

window.onload = load;

Пока я не переплетены этикетки с кнопками с скриптам/ид работал - ДБЯ, что я имею в виду цвет фона # colorChange изменен на цвет щелкнутой метки. Теперь var bgrColor возвращает две строки - сначала один из них - это цвет, который мне нужен, но второй пуст, а цвет #colorChange не изменяется.

Где проблема?

источник

2014-11-05 Jarosław Rewers

Можете ли вы cr Поймать скрипку? –

@huanfeng, вот он: http://jsfiddle.net/ythv11to/ –

После того, как вы начнете использовать ярлык [для], вам придется подойти к нему по-другому, потому что ваше событие «щелчка» будет запущено дважды - один раз для метки и один раз для переключателя (который выбирается автоматически . Here является рабочей скрипкой и ниже измененное JS код.

function load() { 
    document.getElementById("colorListParent").addEventListener("click", function(e){ 
     //alert(e.target.id); 
     if(e.target.id) { 
      var selector = 'label[for=' + e.target.id + ']'; 
      var label = document.querySelector(selector); 
      var bgrColor = label.style.backgroundColor; 
      //alert(bgrColor); 
      //alert(typeof bgrColor); 
      document.getElementById("colorChange").style.backgroundColor = bgrColor; 
     } 
    }); 
} 

window.onload = load;

источник

2014-11-05 09:01:04 legendofawesomeness

Вот и все - спасибо! –

, когда вы нажимаете на метку, элемент «вход» DOM щелкают, как хорошо, так что вы в основном имеете 2 «нажмите кнопку» событие. попробуйте добавить что-то вроде этого:

 if(bgrColor && bgrColor.length>0){ 
      document.getElementById("colorChange").style.backgroundColor = bgrColor; 
     }

источник

2014-11-05 09:08:31 ronapelbaum

JS возврата этикетки цвет фона

ответ

Смежные вопросы