Как изменить динамически созданный фон div с помощью JavaScript?

Я добавляю и удаляю div из тега 'main', используя две созданные мной кнопки. Я хочу изменить каждый из цветов backgroud div при щелчке, но ничего не работает ... почему это так?Как изменить динамически созданный фон div с помощью JavaScript?

это мой код

<body> 
    <div id="wrapper"> 
     <header> 
     </header> 

     <div id="buttonscontainer"> 
      <button class="button" id="add">+</button> 
      <button class="button" id="remove">-</button> 
     </div> 

     <main id="main"> 
     </main> 
    </div>  
</body>

сценарий:

window.onload=function(){ 
    for(var i=0;i<6;i++){ 
      var rectangle = '<div class="rect"></div>'; 
      document.getElementById("main").innerHTML += rectangle; 
     } 
    document.getElementById("add").onclick = addRect; 
    document.getElementById("remove").onclick = removeRect; 
    } 

/*defines the behaviour of the addRect onclick*/ 
function addRect(){ 
    var rectangle = '<div class="rect"></div>'; 
    document.getElementById("main").innerHTML += rectangle; 
} 

/*defines the behaviour of the removeRect onclick*/ 
function removeRect(){ 
    var rectangle = '<div class="rect"></div>'; 
    document.getElementById("main").lastChild.remove(); 
}

источник

2014-12-18 Al.s

Где код, который вы использовали для изменения цвета фона? – Jinandra

Если вы не показываете нам JavaScript, как мы должны помочь вам исправить это? –

Учитывая то, что у вас есть уже, то вы можете сделать это:

window.onload=function(){ 
    for(var i=0;i<6;i++){ 
     //just make use of addRect here, no need to duplicate code 
     addRect(); 
    } 
} 

//Update addRect to add elements in a more DOM like manner, 
//so we don't clear previously bound events 
function addRect(){ 
    var rectangle = document.createElement('div'); 
    rectangle.className = 'rect'; 
    document.getElementById("main").appendChild(rectangle); 
    document.getElementById("main").lastChild.onclick = changeColour; 
} 

function changeColour() { 
    this.style.backgroundColor = '#ff0000'; 
}

Demo

источник

2014-12-18 12:35:53

Я попробовал что-то подобное, но это только позволит мне изменить фон последнего ребенка, но мне нужно, чтобы иметь возможность изменять каждый фон div при нажатии на него –

@Adam Я пропустил ваш первый цикл 'for' - будет редактировать, но это должно позволить щелкнуть по любому из div, а не только последнему ребенку. Мы просто привязываемся к событию 'click' последнего ребенка на момент создания, а не только _ever_, работающему над последним дочерним элементом –

@Adam Apologies. Кажется, что настройка вещей через 'innerHTML' очищает все ранее связанные обработчики событий, поэтому это не сработает. –

Вы не css в код. как вы хотите изменить цвет bg? Код работает, вы добавляете нулевые высоты. Вы должны использовать инструменты chrome dev, чтобы увидеть изменения.

источник

2014-12-18 12:43:38 navotgil

Я не думаю, что css имеет какое-либо отношение к моему вопросу, но вот класс css, если он помогает ..:. Rect { \t width: 420px; \t высота: 200px; \t фон: #ffffff; \t border: 1px solid; \t float: слева; \t margin-left: 56px; \t margin-bottom: 10px; } –

Я имел в виду, что я не вижу той части, в которой вы меняете цвет прямоугольника. Я не понимал, что у тебя его нет. – navotgil

Как изменить динамически созданный фон div с помощью JavaScript?

ответ

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