Как перенести кнопки на следующую строку в javascript

Я делаю игру в крестики-нолики, где мне нужно создать кнопку, а затем добавить к ней события. В ряду три кнопки, в следующем ряду - 3 кнопки, а в следующем ряду - еще три кнопки. Я использовал тег прерывания, а также обозначение \ r \ n, но оно не работает. Пожалуйста помоги.

 <body>
    <div id = "displaytable"></div>
    <script src='jquery-3.3.1.js'></script>
     <script>
      var table= [];
       var blocks = 9;
       var player,boardId;
      winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];


    $(document).ready(function(){

        buttonId = 0;

        for (var index = 0; index < blocks; index++) {
            button1 = document.createElement("button");

            if ((index==2||index==5||index==8)&&(buttonId==3||buttonId==6||buttonId==9)){
                button1.innerHTML = "\r\n"+"<br>";
            }

            button1.innerHTML = " + " ;
            button1.id = buttonId;
            button1.setAttribute("value", buttonId);
            button1.setAttribute("text", buttonId);

            button1.style.fontFamily = "Times New Roman";
            button1.style.backgroundSize = "50px";
            button1.style.backgroundColor = "#C0C0C0";
            button1.style.fontSize = "25px";
            button1.style.marginBottom = "10px";
            button1.style.marginLeft = "5px";   
            button1.style.marginRight = "5px";
            document.body.appendChild(button1);
            buttonId++;



    }
});

  </script>

</body>

Возможный дубликат: stackoverflow.com/questions/8147376/…

— 16.03.2018 10:17

javascript jquery

16.03.2018 10:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

568

Ответы 2

Ваше условие добавления br неверно, я добавил измененный код в js bin

var table= [];
       var blocks = 9;
       var player,boardId;
      winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];


    $(document).ready(function(){

        buttonId = 0;

        for (var index = 0; index < blocks; index++) {
            button1 = document.createElement("button");
 
            button1.innerHTML = " + " ;
            button1.id = buttonId;
            button1.setAttribute("value", buttonId);
            button1.setAttribute("text", buttonId);

            button1.style.fontFamily = "Times New Roman";
            button1.style.backgroundSize = "50px";
            button1.style.backgroundColor = "#C0C0C0";
            button1.style.fontSize = "25px";
            button1.style.marginBottom = "10px";
            button1.style.marginLeft = "5px";   
            button1.style.marginRight = "5px";
            document.body.appendChild(button1);
          
          if ((index==2||index==5||index==8)){
                document.body.appendChild(document.createElement('br'));
            }

            buttonId++;



    }
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "displaytable"></div>

16.03.2018 10:23

CSS решение

Вы можете сделать это с помощью CSS, отобразить кнопки в виде блоков и переместить их влево.

Очистить каждую третью кнопку.

var table = [];
var blocks = 9;
var player, boardId;
winningCombinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];


$(document).ready(function() {

  buttonId = 0;

  for (var index = 0; index < blocks; index++) {
    button1 = document.createElement("button");

    if ((index == 2 || index == 5 || index == 8) && (buttonId == 3 || buttonId == 6 || buttonId == 9)) {
      button1.innerHTML = "\r\n" + "<br>";
    }

    button1.innerHTML = " + ";
    button1.id = buttonId;
    button1.setAttribute("value", buttonId);
    button1.setAttribute("text", buttonId);

    button1.style.fontFamily = "Times New Roman";
    button1.style.backgroundSize = "50px";
    button1.style.backgroundColor = "#C0C0C0";
    button1.style.fontSize = "25px";
    button1.style.marginBottom = "10px";
    button1.style.marginLeft = "5px";
    button1.style.marginRight = "5px";
    document.body.appendChild(button1);
    buttonId++;



  }
});

 button {
  display: block;
  float: left;
}
button:nth-of-type(3n+1) {
  clear: both;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "displaytable"></div>

JS решение

var table = [];
var blocks = 9;
var player, boardId;
winningCombinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];


$(document).ready(function() {

  buttonId = 0;

  for (var index = 0; index < blocks; index++) {
    button1 = document.createElement("button");

  button1.innerHTML = " + ";
    button1.id = buttonId;
    button1.setAttribute("value", buttonId);
    button1.setAttribute("text", buttonId);

    button1.style.fontFamily = "Times New Roman";
    button1.style.backgroundSize = "50px";
    button1.style.backgroundColor = "#C0C0C0";
    button1.style.fontSize = "25px";
    button1.style.marginBottom = "10px";
    button1.style.marginLeft = "5px";
    button1.style.marginRight = "5px";
    document.body.appendChild(button1);
    if ( (index+1) % 3 == 0 ) {
      document.body.appendChild( document.createElement("br") );
    }
    buttonId++;



  }
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "displaytable"></div>

16.03.2018 10:24

Другие вопросы по теме

Счетчик анимированных чисел jQuery от нуля до процентного значения

AutoNumeric не разрешает ввод десятичных чисел с цифровой клавиатуры / Internet Explorer

Как запустить эту CSS-анимацию с помощью JQuery?

Невозможно прочитать свойство enumNodeFragments из undefined

Проблемы с обработкой формы jQuery

SlideToggle и отзывчивые изменения ширины

Невозможно добавить ввод текста в li

Добавление нескольких строк таблицы в базу данных mysql

Jquery datatables stateSaveCallback не работает так, как должен

Javascript / JQuery: переменная не определена после выполнения Ajax

Как перенести кнопки на следующую строку в javascript

Ответы 2

CSS решение

JS решение

Другие вопросы по теме

Похожие вопросы