Я не могу заставить свою пирамиду отображаться правильно

Следующий код должен генерировать пирамиду, но по какой-то странной причине, когда я вывожу его на свою страницу, он совсем не похож на пирамиду. Он отображается правильно в консоли, но не на самой странице. Я попробовал флекс, но безрезультатно.

Я попробовал использовать flex для переменной wincon, которая предназначена для viewport__display, но у меня не получилось пирамиды. Я также пытался поместить результат в div, используя литералы шаблона, но не смог понять, как его стилизовать.

const view = document.getElementById("viewport");
const wincon = document.getElementById("viewport__display");
const genbtn = document.getElementById("viewport__btn");
const character = "!";
const count = 20;
const rows = [];
let inverted = false;

function padRow(rowNumber, rowCount) {
  return (
    " ".repeat(rowCount - rowNumber) +
    character.repeat(2 * rowNumber - 1) +
    " ".repeat(rowCount - rowNumber)
  );
}

for (let i = 1; i <= count; i++) {
  if (inverted) {
    rows.unshift(padRow(i, count));
  } else {
    rows.push(padRow(i, count));
  }
}

let result = "";

for (const row of rows) {
  result = result + "\n" + row;
}

const output = result;

genbtn.addEventListener("click", () => {
  wincon.innerHTML = output;
});

@import url("https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
body {
  font-family: "Radio Canada Big", sans-serif;
  text-align: center;
  background-color: #ffffff96;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: rgb(0, 187, 255);
}

#viewport {
  width: 500px;
  height: 500px;
  background-color: black;
  margin-left: 400px;
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

#viewport__display {
  width: 350px;
  height: 350px;
  border: 2px solid red;
  margin-left: 80px;
  margin-top: 30px;
  background-color: rgba(221, 221, 215, 0.902);
}

#viewport__btn {
  width: 200px;
  height: 40px;
  margin-top: 10px;
  margin-left: 160px;
  background-color: orange;
  font-size: 20px;
  font-weight: 700;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
  <link rel = "stylesheet" href = "styles.css" />
  <title>Pyramid Generator</title>
</head>

<body>
  <h1>Pyramid Generator</h1>
  <div id = "viewport">
    <div id = "viewport__display"></div>
    <button id = "viewport__btn">Generate</button>
  </div>
  <script src = "script.js"></script>
</body>

</html>

\n должен быть <br>, чтобы ваш HTML мог добавить новую строку.

— 27.05.2024 09:38

javascript html

27.05.2024 09:32

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

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

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

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

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

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

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

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

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

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

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

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

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Исправьте две вещи:

1- используйте   вместо пробела. Несколько пробелов интерпретируются как один пробел.

2- используйте <br> вместо \n.

const view = document.getElementById("viewport");
const wincon = document.getElementById("viewport__display");
const genbtn = document.getElementById("viewport__btn");
const character = "!";
const count = 20;
const rows = [];
let inverted = false;

function padRow(rowNumber, rowCount) {
  return (
    '&nbsp;'.repeat(rowCount - rowNumber) +
    character.repeat(2 * rowNumber - 1) +
    '&nbsp;'.repeat(rowCount - rowNumber)
  );
}

for (let i = 1; i <= count; i++) {
  if (inverted) {
    rows.unshift(padRow(i, count));
  } else {
    rows.push(padRow(i, count));
  }
}

let result = "";

for (const row of rows) {
  result = result + "<br>" + row;
}

const output = result;

genbtn.addEventListener("click", () => {
  wincon.innerHTML = output;
});

@import url("https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
body {
  font-family: "Radio Canada Big", sans-serif;
  text-align: center;
  background-color: #ffffff96;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: rgb(0, 187, 255);
}

#viewport {
  width: 500px;
  height: 500px;
  background-color: black;
  margin-left: 400px;
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

#viewport__display {
  width: 350px;
  height: 350px;
  border: 2px solid red;
  margin-left: 80px;
  margin-top: 30px;
  background-color: rgba(221, 221, 215, 0.902);
}

#viewport__btn {
  width: 200px;
  height: 40px;
  margin-top: 10px;
  margin-left: 160px;
  background-color: orange;
  font-size: 20px;
  font-weight: 700;
}

<div id = "viewport">
    <div id = "viewport__display"></div>
    <button id = "viewport__btn">Generate</button>
  </div>

27.05.2024 09:42

Добавьте пробел: pre; в viewport__display

const view = document.getElementById("viewport");
const wincon = document.getElementById("viewport__display");
const genbtn = document.getElementById("viewport__btn");
const character = "!";
const count = 20;
const rows = [];
let inverted = false;

function padRow(rowNumber, rowCount) {
  return (
    " ".repeat(rowCount - rowNumber) +
    character.repeat(2 * rowNumber - 1) +
    " ".repeat(rowCount - rowNumber)
  );
}

for (let i = 1; i <= count; i++) {
  if (inverted) {
    rows.unshift(padRow(i, count));
  } else {
    rows.push(padRow(i, count));
  }
}

let result = "";

for (const row of rows) {
  result = result + "\n" + row;
}

const output = result;

genbtn.addEventListener("click", () => {
  wincon.innerHTML = output;
});

@import url("https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
body {
  font-family: "Radio Canada Big", sans-serif;
  text-align: center;
  background-color: #ffffff96;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
  padding: 0;
}

h1 {
  background-color: rgb(0, 187, 255);
}

#viewport {
  width: 500px;
  height: 500px;
  background-color: black;
  margin-left: 400px;
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}

#viewport__display {
  width: 350px;
  height: 350px;
  border: 2px solid red;
  margin-left: 80px;
  margin-top: 30px;
  background-color: rgba(221, 221, 215, 0.902);
  white-space: pre;
}

#viewport__btn {
  width: 200px;
  height: 40px;
  margin-top: 10px;
  margin-left: 160px;
  background-color: orange;
  font-size: 20px;
  font-weight: 700;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
  <link rel = "stylesheet" href = "styles.css" />
  <title>Pyramid Generator</title>
</head>

<body>
  <h1>Pyramid Generator</h1>
  <div id = "viewport">
    <div id = "viewport__display"></div>
    <button id = "viewport__btn">Generate</button>
  </div>
  <script src = "script.js"></script>
</body>

</html>

27.05.2024 09:44

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

Скорость страницы: проблема с «начальным масштабом» — не имеет тега <meta name="viewport"> с шириной или начальным масштабом

Возникли проблемы с настройкой переключаемого меню для посетителей с мобильных устройств

Как загрузить файлы APK во входной файл в формате HTML/PHP

Как сделать кнопку «Сохранить» для сохранения значения HTML-ввода (type="text") в отдельном файле .txt (JavaScript)

Невозможно сохранить на страницах Razor

Невозможно сопоставить в TypeScript

Как я могу вызвать функцию с параметрами в html <p>

Ошибка: атрибут, требующий aria, не разрешен в общей роли

Как взять только нужную часть изображения в css

Контейнер Div появляется, а затем исчезает вскоре после этого

Я не могу заставить свою пирамиду отображаться правильно

Ответы 2

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

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