Submit button is giving null-CodePudding

I am trying to develop a rating site which is a part of Frontend Mentor Challenge(https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI) in which I am facing the following problems:-

On clicking submit button it gives a null error. Why is it happening and how can I fix this?
Should I use a modal box for thank you page or is it ok to make a different HTML page to handle the thank you page?
How can I access the 'numbers' class and use it on the 'thank you.html' page?

const numberClicked = document.querySelectorAll(".number")
const submitBtn = document.getElementById("submit-btn")

numberClicked.forEach(function(oneNumbreClicked) {
  oneNumbreClicked.addEventListener('click', function() {
    console.log(oneNumbreClicked.innerText)
  })
})


submitBtn.addEventListener('click', function() {
  document.getElementById("final-rating").innerText = `You selected ${oneNumbreClicked.innerText} out of 5`
})

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  font-family: 'Overpass', sans-serif;
  background-color: hsl(216, 12%, 8%);
}

.container {
  color: white;
  width: 35%;
  background-color: hsl(213, 19%, 18%);
  border-radius: 10px;
  box-shadow: 0 10px hsl(216, 12%, 8%);
  margin: 3em auto;
  padding: 2em;
}

.thank-you-container {
  text-align: center;
}

.star {
  background-color: hsl(229.4, 14.3%, 23.3%);
  border-radius: 50%;
  padding: 10px;
}

.numbers {
  margin: 0 auto;
}

.number {
  display: inline-block;
  background-color: hsl(229.4, 14.3%, 23.3%);
  border-radius: 50%;
  text-align: center;
  padding: 10px;
  width: 40px;
  font-size: 1em;
  margin: 0 0.423em;
  opacity: 0.5;
  border: none;
  color: inherit;
}

.submit-btn {
  background-color: hsl(25, 97%, 53%);
  color: white;
  padding: .8em 2em;
  width: 100%;
  border-radius: 1.5em;
  border: none;
  margin-top: 1.5em;
  font-weight: 400;
  font-size: 1.1em;
}

.number:hover {
  opacity: 1;
  background-color: hsl(217, 12%, 63%);
}

.submit-btn:hover {
  opacity: 0.5;
}

.submit-btn:focus,
.number:focus {
  opacity: 1;
  background-color: white;
  color: hsl(25, 97%, 53%);
}

.final-rating {
  background-color: hsl(229.4, 14.3%, 23.3%);
  color: hsl(25, 97%, 53%);
  border-radius: 1.5em;
  padding: 0.4em;
  margin: 1.3em auto;
  width: 12.5em;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap" rel="stylesheet">
  <title>Frontend Mentor | Interactive rating component | Rating Page</title>
  <style>
    .attribution {
      font-size: 11px;
      text-align: center;
      color: white;
    }
    
    .attribution a {
      color: hsl(228, 45%, 44%);
    }
  </style>
</head>

<body>
  <main>

    <!-- Rating state start -->

    <section >
      <img  src="images/icon-star.svg" alt="">
      <h2>How did we do?</h2>
      <p>
        Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
      </p>
      <div  id="numbers">
        <button >1</button>
        <button >2</button>
        <button >3</button>
        <button >4</button>
        <button >5</button>
      </div>
      <a href="thank.html" target="_self">
        <button  id="submit-btn">Submit</button>
      </a>
    </section>
    <!-- Rating state end -->


    <div >
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Raunak Raj</a>.
    </div>
  </main>
  <script src="script.js"></script>

</body>

</html>

<!--This is the linked HTML file(thank.html) which activates on clicking upon Submit button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 


  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap" rel="stylesheet">

  <title>Frontend Mentor | Interactive rating component |Thank You Page</title>


  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>
<main>

    
      <section >
          <img src="images/illustration-thank-you.svg" alt="">
          <p class= "final-rating" id="final-rating"></p>
          <h2>Thank you!</h2>
          <p>We appreciate you taking the time to give a rating. If you ever need more support,  don't hesitate to get in touch!</p>
      </section>

    
    
      <div >
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
        Coded by <a href="#">Raunak Raj</a>.
      </div>
</main>
<script src="script.js"></script>
</body>
</html>


-->

CodePudding user response：

So first it would be better if you could write the whole error, so we have more info of what is causing it.

Issue: But of what I've seen is that, the submit button is wrapped in anchor tags, which is redirecting us to "thank.html" as: <a href="thank.html"><button>Submit</button></a>, and in the thank.html (the commented code below) you are loading the very same script. <script src="script.js"></script> which causes the problem/error. Why is it causing a problem, is simply because in this script you are accessing the DOM elements which does not exist in thank.html. For example in script.js you access the elements with class query selector .numbers, but when thank.html is loaded this elements are not existing. =)

Solution:

You could create a new unique js file for the purpose of thank.html. And add an event listener on load as: window.addEventListener("load", () => {../logic here}), but with this approach you will have to think of how would you pass the parameter of the value oneNumbreClicked.innerText so you can use and print it. As a starter you could share the information through the sessionStorage or the localeStorage. (There are way more ways)
Other easy and straight forward approach to have only one html file. Have the both <section></section> (section with class container and thank-you-container). Initially the section with class thank-you-container would have css property: display: "none". When clicking on submit button, firstly you will change the display property of the section with class thank-you-container to "flex or block", and change the display prop of the section with class container to "none, and print the text. On a way you will simulate "single page applicaton" :D. And do not forget to remove the <a> </a> tags from the submit button, so you won't redirect.

Dummy demo solution:

const container = document.getElementById("container")
const containerTwo =  document.getElementById("thank-you-container")


const myBtn = document.getElementById("myBtn");

myBtn.addEventListener("click", ()=> {
container.style.display = "none";
containerTwo.style.display = "flex";

// your additional logic here
})

.thank-you-container {
display: none}

<div  id="container">
  <h1>Container one</h1>
</div>

<div  id="thank-you-container">
  <h1>Container two</h1>
</div>

<button id="myBtn">Submit</button>