Как добавить сгенерированную JS кнопку в div вместо тела

Привет :) Я пытаюсь сделать небольшую игру «Угадай число» на JS, чтобы наконец-то выучить этот язык, и хотя функциональность реализована, у меня есть некоторые проблемы с добавлением кнопки, сгенерированной JS, в контейнер div вместо тела .

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector(".guesses");
const lastResult = document.querySelector(".lastResult");
const lowOrHi = document.querySelector(".lowOrHi");

const guessField = document.querySelector(".guessField");
const guessSubmit = document.querySelector(".guessSubmit");

let guessCount = 1;
let resetButton;
guessField.focus();

function checkGuess() {
  let userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = "Previous guesses: ";
  }
  guesses.textContent += userGuess + " ";

  function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent = 'Start new game';
    document.body.append(resetButton);
    resetButton.addEventListener('click', resetGame);
  }

  function resetGame() {
    guessCount = 1;

    const resetParas = document.querySelectorAll('.resultParas p');
    for (let i = 0; i < resetParas.length; i++) {
      resetParas[i].textContent = '';
    }

    resetButton.parentNode.removeChild(resetButton);

    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.value = '';
    guessField.focus();

    lastResult.style.backgroundColor = 'white';

    randomNumber = Math.floor(Math.random() * 100) + 1;
  }

  if (userGuess === randomNumber) {
    lastResult.textContent = "Congratulations! You got it right.";
    lastResult.style.backgroundColor = "green";
    lowOrHi.textContent = " ";
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = "Game over! No more turns!";
    setGameOver();
  } else {
    lastResult.textContent = "Wrong";
    lastResult.style.backgroundColor = "red";
    if (userGuess < randomNumber) {
      lowOrHi.textContent = "Your last guess was too low!";
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = "Your last guess was too high!";
    }
  }

  guessCount++;
  guessField.value = " ";
  guessField.focus();
}

guessSubmit.addEventListener("click", checkGuess);
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">

<div class = "container">
  <h1 id = "main_header">Number guessing game</h1>

  <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>

  <div class = "form">
    <label for = "guessField">Enter a guess: </label>
    <input type = "text" id = "guessField" class = "guessField">
    <input type = "submit" value = "Submit guess" class = "guessSubmit">
  </div>

  <div class = "resultParas">
    <p class = "guesses"></p>
    <p class = "lastResult"></p>
    <p class = "lowOrHi"></p>
  </div>
</div>

Мне бы очень хотелось, чтобы эта кнопка «Начать новую игру» находилась внутри div с остальными элементами, чтобы я мог сделать ее немного красивее.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
666
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Просто найдите родительский div:

const yourDiv = document.getElementById('yourDivId');

И затем добавьте к нему кнопку:

yourDiv.appendChild(resetButton);
Ответ принят как подходящий

Вы можете получить элемент, который хотите прикрепить к кнопке, используя функцию document.getElementsbyClassName, а затем добавить к ней:

В следующем примере я прикрепил элемент к классу div form.

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector(".guesses");
const lastResult = document.querySelector(".lastResult");
const lowOrHi = document.querySelector(".lowOrHi");

const guessField = document.querySelector(".guessField");
const guessSubmit = document.querySelector(".guessSubmit");

let guessCount = 1;
let resetButton;
guessField.focus();

function checkGuess() {
  let userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = "Previous guesses: ";
  }
  guesses.textContent += userGuess + " ";

  function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent = 'Start new game';
    formElem = document.getElementsByClassName("form")[0]
    formElem.append(resetButton);
    resetButton.addEventListener('click', resetGame);
  }

  function resetGame() {
    guessCount = 1;

    const resetParas = document.querySelectorAll('.resultParas p');
    for (let i = 0; i < resetParas.length; i++) {
      resetParas[i].textContent = '';
    }

    resetButton.parentNode.removeChild(resetButton);

    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.value = '';
    guessField.focus();

    lastResult.style.backgroundColor = 'white';

    randomNumber = Math.floor(Math.random() * 100) + 1;
  }

  if (userGuess === randomNumber) {
    lastResult.textContent = "Congratulations! You got it right.";
    lastResult.style.backgroundColor = "green";
    lowOrHi.textContent = " ";
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = "Game over! No more turns!";
    setGameOver();
  } else {
    lastResult.textContent = "Wrong";
    lastResult.style.backgroundColor = "red";
    if (userGuess < randomNumber) {
      lowOrHi.textContent = "Your last guess was too low!";
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = "Your last guess was too high!";
    }
  }

  guessCount++;
  guessField.value = " ";
  guessField.focus();
}

guessSubmit.addEventListener("click", checkGuess);
<!DOCTYPE html>
<html>

<head>
  <meta charset = "utf-8">

  <title>Number guessing game</title>
  <link rel = "stylesheet" href = "style.css">
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin = "anonymous">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&display=swap');
  </style>
</head>

<body>
  <div class = "container">
    <h1 id = "main_header">Number guessing game</h1>

    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>

    <div class = "form">
      <label for = "guessField">Enter a guess: </label>
      <input type = "text" id = "guessField" class = "guessField">
      <input type = "submit" value = "Submit guess" class = "guessSubmit">
    </div>

    <div class = "resultParas">
      <p class = "guesses"></p>
      <p class = "lastResult"></p>
      <p class = "lowOrHi"></p>
    </div>
  </div>

  <script src = "script.js" defer></script>
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin = "anonymous"></script>
</body>

</html>

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