Как добавить div после нажатия кнопки с другим цветом, если четный или нечетный - PullRequest
Новая
       9

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

0 голосов
/ 27 апреля 2020

Я хочу нажать на кнопку, добавив div к контейнеру id с разными цветными фонами, если они нечетные или четные. Это код, который я написал. Я пытался использовать оператор if с модулем внутри для l oop. nextDiv e Nextdiv2 имеет два разных фона.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section id="container">
        <button id="button">Clicca qui</button>
       <div class="divs"></div>
    </div>


<script src="script.js"></script>
</body>
</html>

JAVASCRIPT

var container = document.getElementById("container");
    var button = document.getElementById("button");

    var divs  = document.getElementsByClassName("divs");


    button.addEventListener("click", AddDiv);

    function AddDiv() {

                nextDivs = document.createElement("div");
                nextDivs.setAttribute("class", "nextDiv"); 
                container.appendChild(nextDivs);
            } 
        for(i = 0; i < container.length; i++) {    
                if(i % 2 !== 0){
                    nextDivs.ClassList.add("nextDiv");
                }
                    nextDivs.classList.remove("nextDiv2");
            }

спасибо

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

Я создал переменную для подсчета суммы созданных div-ов и использовал ее для вызова c, если следующий div будет использовать nextDiv или nextDiv2. 

let container = document.getElementById("container");
let button = document.getElementById("button");
let divs  = document.getElementsByClassName("divs");

button.addEventListener("click", AddDiv);

let countDivs = 0;

function AddDiv() {
  nextDivs = document.createElement("div");
  if (countDivs % 2 === 0){
  	nextDivs.setAttribute("class", "nextDiv"); 
  } else {
  	nextDivs.setAttribute("class", "nextDiv2"); 
  }
  countDivs++;
  container.appendChild(nextDivs);
}
.nextDiv, .nextDiv2{
  width: 300px;
  height: 50px;
}
.nextDiv{
  background-color: #242424;
}
.nextDiv2{
  background-color: #de2121;
}

button{
  margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="container">
        <button id="button">Clicc aqui</button>
        <div class="divs"></div>
    </section>
</body>
</html>
0 голосов
/ 27 апреля 2020

вы должны посчитать, сколько делений у вас есть внутри вашего контейнера, поэтому, когда вы добавляете один дивизион, вы знаете, что у вас есть нечетное или четное количество, и таким образом размещаете класс 

var button = document.getElementById("button");


button.addEventListener("click", AddDiv);

function AddDiv() {
  var container = document.getElementById("container");
  var nextDivs = document.createElement("div");

  if (container.getElementsByTagName('div').length % 2 == 0) {
    nextDivs.setAttribute("class", "even");
  } else {
    nextDivs.setAttribute("class", "odd");
  }
  container.appendChild(nextDivs);
}
.odd {
  background-color: red;
  width: 10px;
  height: 10px;
}

.even {
  background-color: yellow;
  width: 10px;
  height: 10px;
}
<section id="container">
  <button id="button">Clica qui</button>
</section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...