So I want a text to show up under every input field(don’t mind the ‘iii’, it’s a dummy text) when it’s empty. I have no idea why it’s not working. I could do that by having every text as a different class but the code would look terrible. When I click a button, nothing happens. I know it’s something simple but I can’t pin point what it is. Thanks in advance for help.

const wrongDisplay = document.querySelectorAll('.wrongInfo');
const formData = document.querySelector('.formData');
const formInput = document.querySelectorAll('.formInput')
const firstPassword = document.querySelector('#firstPassword')
  const passwordConfirm = document.querySelector('#passwordConfirm')
const submitButton = document.querySelector('.submitButton')

submitButton.addEventListener('click', () => {
  formInput.forEach(el => {
       if(el.value === '') {
            wrongDisplay.textContent="required field"
       }
  });
});
<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8">
<title> ol jeaa</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/72843242/./styles/style.css">
<body>

<!--Image on the left side of the page-->
<div class="leftSidePhotoContainer">
    <img src="https://stackoverflow.com/questions/72843242/./images/pexels-marvin-machler-11127092.jpg">
</div>

<!--Main text on the page-->
<div class="rightSide">
    <main class="mainText">
     
        <p>
          Start your online business journey today!
          All you have to do is sign up and post offers of items you want to sell!
    </main>


    <!-- Signup container -->
    <form action="#" method="get" class="formData">
    <fieldset class="formContainer">
      <div class="firstColumn">
        <span>Let's do this!</span>

      <div class="firstNameCont">
        <label for="FirstName" class="labelForm" >First Name</label>
        <input type="text" id="FirstName" name="FirstName" class="formInput" required>
        <span class="wrongInfo">iiii</span>
      </div>

      <div class="emailCont">
        <label for="email" class="labelForm" >Email</label>
        <input type="email" id="email" name="email" class="formInput" id="emailInvalid" required>
        <span class="wrongInfo">iiii</span>
      </div>

      <div class="passwordCont">
        <label for="password" class="labelForm">Password</label>
        <input type="password" id="firstPassword" name="password" class="formInput" required >
        <span class="wrongInfo">iiii</span>
      </div>
    </div>


      <div class="secondColumn">
        <span>Let's do this!</span>

      <div class="LastNameCont">
        <label for="LastName" class="labelForm">Last Name</label>
        <input type="text" id="LastName" name="LastName" class="formInput" required>
        <span class="wrongInfo">iiii</span>
      </div>

      <div class="phoneNumberCont">
        <label for="phoneNumber" class="labelForm">Phone Number</label>
        <input type="tel" id="phoneNumber" name="phoneNumber" class="formInput" required>
        <span class="wrongInfo">iiii</span>
      </div>
      
      <div class="passwordConfirmCont">
        <label for="passwordConfirm" class="labelForm">Confirm Password</label>
        <input type="password" id="passwordConfirm" name="passwordConfirm" class="formInput" required >
        <span class="wrongInfo">iiii</span>
      </div>
    </div>
    </fieldset>
    <div class="buttonContainer">
<button type="submit" class="submitButton">Create account</button>
</div>
</form>
  <script src="./scripts/script.js"></script>
</body>
    </head>
</html>

Two things are wrong here.

First, and most important:
You are using wrongDisplay.textContent="required field" to set the field, but you declared wrongDisplay as the array of form inputs. You probably want

el.textContent="required field"

which will set the individual span’s text content.

Second:
You declared required properties on the forms which won’t allow the button to fire unless they’re filled out. This is up to you on if you want these or not, or you could always move the submit button out of the form and handle your submit logic your way. Or you should instead, attach the listener to the form, on event "submit" as opposed to "click" and override default behavior with event.preventDefault(). Your choice.

A few things to fix:

  • add novalidate attribute in form to prevent native HTML5 validation
  • add e.preventDefault() in click() handler to prevent form submission without validation
  • you were trying to set textContent to document.querySelectorAll('.wrongInfo'); as if it was a single element like document.querySelector('.wrongInfo');
  • you can use el.nextElementSibling Instead, and you need to check if value is empty or not to remove “required field” when input has value after being invalid
  • your HTML wasn’t correct: missing p tag, main tag I assume closed too early
const formInput = document.querySelectorAll('.formInput')
const submitButton = document.querySelector('.submitButton')

submitButton.addEventListener('click', e => {
  e.preventDefault();
  formInput.forEach(el => el.nextElementSibling.textContent = el.value === '' ? 'required field' : '');
});
<!--Image on the left side of the page-->
<div class="leftSidePhotoContainer">
  <img src="https://stackoverflow.com/questions/72843242/./images/pexels-marvin-machler-11127092.jpg">
</div>

<!--Main text on the page-->
<div class="rightSide">
  <main class="mainText">
    <p>
      Start your online business journey today! All you have to do is sign up and post offers of items you want to sell!</p>

    <!-- Signup container -->
    <form action="#" method="get" class="formData" novalidate>
      <fieldset class="formContainer">
        <div class="firstColumn">
          <span>Let's do this!</span>

          <div class="firstNameCont">
            <label for="FirstName" class="labelForm">First Name</label>
            <input type="text" id="FirstName" name="FirstName" class="formInput" required>
            <span class="wrongInfo">iiii</span>
          </div>

          <div class="emailCont">
            <label for="email" class="labelForm">Email</label>
            <input type="email" id="email" name="email" class="formInput" id="emailInvalid" required>
            <span class="wrongInfo">iiii</span>
          </div>

          <div class="passwordCont">
            <label for="password" class="labelForm">Password</label>
            <input type="password" id="firstPassword" name="password" class="formInput" required>
            <span class="wrongInfo">iiii</span>
          </div>
        </div>
        <div class="secondColumn">
          <span>Let's do this!</span>

          <div class="LastNameCont">
            <label for="LastName" class="labelForm">Last Name</label>
            <input type="text" id="LastName" name="LastName" class="formInput" required>
            <span class="wrongInfo">iiii</span>
          </div>
          <div class="phoneNumberCont">
            <label for="phoneNumber" class="labelForm">Phone Number</label>
            <input type="tel" id="phoneNumber" name="phoneNumber" class="formInput" required>
            <span class="wrongInfo">iiii</span>
          </div>
          <div class="passwordConfirmCont">
            <label for="passwordConfirm" class="labelForm">Confirm Password</label>
            <input type="password" id="passwordConfirm" name="passwordConfirm" class="formInput" required>
            <span class="wrongInfo">iiii</span>
          </div>
        </div>
      </fieldset>
      <div class="buttonContainer">
        <button type="submit" class="submitButton">Create account</button>
      </div>
    </form>
  </main>