Refaktoryzacja kodu, pętla for

Question

Chciałbym dowiedzieć się w jaki sposób mógłbym uzyskać określony efekt. Otóż chcę by JavaScript tworzył mi określoną ilość bloków (podaną przez użytkownika w inpucie na stronie), które będą się układały w szachownicę. Doszedłem do takiego rozwiązania metodą okrężną, ale jestem pewny, że możnaby to zrobić łatwiej, np. jeżeli i % jest równe 0 oraz i % 2 jest równe 1 to dla następnych 10 (lub mniej, jeśli zbliżamy się do końca ilości bloków). W JSFiddle cały dokument. 

 function stworz() {
            var ile = document.getElementById('ileKwadratow').value;
            var divHtml = "";
            var dwudziestki = Math.floor(ile/20);
            var dziesiatki = Math.floor((ile - dwudziestki*20) / 10);
            var reszta = ile - 20*dwudziestki - 10*dziesiatki;
            var kolor = ['<div style="background:black;"></div>', '<div style="background:white;"></div>'];

            for (i = 1; i <= dwudziestki; i++) {
                 for (y = 1; y <= 10; y++) {
                    if (y % 2 == 1) {divHtml += kolor[0]}
                    if (y % 2 == 0) {divHtml += kolor[1]}
                 }
                 for (y = 1; y <= 10; y++) {
                    if (y % 2 == 1) {divHtml += kolor[1]}
                    if (y % 2 == 0) {divHtml += kolor[0]}
                 }
            }
            for (i = 1; i <= dziesiatki; i++) {
                for (y = 1; y <= 10; y++) {
                   if (y % 2 == 1) {divHtml += kolor[0]}
                   if (y % 2 == 0) {divHtml += kolor[1]}
                }
            }
            for (i = 1; i <= reszta; i++) {
                if (dziesiatki == 0 && dwudziestki == 0) {
                    if (i % 2 == 1) {divHtml += kolor[0]}
                    if (i % 2 == 0) {divHtml += kolor[1]}
                } else if (dziesiatki == 0) {
                    if (i % 2 == 1) {divHtml += kolor[0]}
                    if (i % 2 == 0) {divHtml += kolor[1]}
                } else if (dwudziestki == 0 && dziesiatki != 0) {
                    if (i % 2 == 1) {divHtml += kolor[1]}
                    if (i % 2 == 0) {divHtml += kolor[0]}
                } else {
                    if (i % 2 == 1) {divHtml += kolor[1]}
                    if (i % 2 == 0) {divHtml += kolor[0]}
                }
            }
            document.getElementById('main').innerHTML = divHtml;
        }

 

Answer 1

• createElement
• createDocumentFragment
• classList
• Klasy zamiast style
• Stosuj domknięcia, szczególnie dla elementów DOM. 

Comments

Btw. Szachownica ma tylko 2 rodzaje wierszy. Zaczynający się od białego, lub czarnego pola. Mając tą wiedzę, czy na pewno musisz iterować x² razy?

---

Okej. To pozwoli mi w bardziej cywilizowany sposób stworzyć elementy i nadać im klasy. Ale co z samym skryptem? Da się osiągnąć mój pomysł lub czy jest jakiś lepszy? W jaki sposób? Albo jakie warunki powinienem zastosować dla classList.toggle (bo wydaje mi się, że ta metoda może być dobrym pomysłem). Moim największym problemem jest to, że nie wiem w jaki sposób miałbym osiągnąć tą zmianę patternu po 10 elementach.

Answer 2

jedno z możliwych rozwiązań, pisane na szybko:

<div id="container">
  <header>
    <form>
      <h2>Jak dużo kwadratów?</h2>
      <input type="number" id="num">
      <button id="go">CLICK</button>
    </form>
  </header>
  <div id="main" class="main"></div>
</div>

 

const Square = (color) => `
  <div class="square ${color}"></div>
`

const renderSquares = (num, perRow, container) => {
  let html = ''
  
  for (let i = 0; i < num; i++) {
    const isEvenColumn = (i % perRow) % 2 === 0
    const isEvenRow = Math.floor(i / perRow) % 2 === 0
    const color = (isEvenColumn && isEvenRow) || (!isEvenColumn && !isEvenRow)
      ? 'dark'
      : 'light'
    
    html += Square(color)
  }

  container.innerHTML = html
}

document
  .getElementById('go')
  .addEventListener('click', (event) => {
    event.preventDefault()
  	const num = document.getElementById('num').valueAsNumber
    renderSquares(num, 10, document.getElementById('main'))
  })

 

JSFiddle: https://jsfiddle.net/2ytwkwe1/