Question 214964 in Html Question posted in
Some basic documentation can be found here.

Html – submit button doesn't change the paragrapgh

I’m extremely new to programming, as you can probably tell. Do you have any idea why the submit button doesn’t change the text of the .infotext paragraph?

const container = document.querySelector(".container");

const firstNameInput = container.querySelector(".firstname");
const lastNameInput = container.querySelector(".lastname");
const birthYearInput = container.querySelector(".birthyear");
const birthPlaceInput = container.querySelector(".birthplace");

const infoText = document.querySelector(".infotext");

container.querySelector(".submit").addEventListener("click", function () {
  const firstName = firstNameInput.value;
  const lastName = lastNameInput.value;
  const birthYear = birthYearInput.value;
  const birthPlace = birthPlaceInput.value;

  infoText.textContent = `First Name: ${firstName}, Last Name: ${lastName}, Birth Year: ${birthYear}, Birth Place: ${birthPlace}`;
});
<html lang="en">
  <head>
    <link rel="stylesheet" href="Style.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Person Information</title>
  </head>
  <body>
    <div class="container">
      <h2>Fill the Form below</h2>
      <input class="inp firstname" type="text" placeholder="First Name" />
      <input class="inp lastname" type="text" placeholder="Last Name" />
      <input class="inp birthyear" type="number" placeholder="Birth Year" />
      <input class="inp birthplace" type="text" placeholder="Birth Place" />
      <button class="submit">Submit</button>
    </div>

    <div class="displayinfo"><p class="infotext"></p></div>
    <link rel="script" href="script.js" />
  </body>
</html>

screen shot of the page

I want the field on the right to change its text content accordingly based on the information from the inputs in the field on the left.

Tags:

2

Answers


  1. 0

    I welcome you to Programming.

    Use infoText.innerHtml instead of infoText.textContent in your last line

    It will work.

    Login or Signup to reply.
  2. 0

    Have a good day my fellow new programmer.

    Your JavaScript is flawless the only problem is using href instead of src for loading the JavaScript file, and I shall add your snippet works fine here as you’ve embedded the JS the other way.

    For you information

    You must use the href attribute in order to specify the location (URL) of a linked resource, such as stylesheet, or resource that an anchor element points to, such a tag.

    Although, you must use src attribute whenever you want to embed a resource such as scripts, images, videos, iframes, audios, etc.

    Also, you cannot load scripts via <link> tag, you must use <script> instead.

    For more information see this tutorial.

    Corrected code

    <html lang="en">
  <head>
    <link rel="stylesheet" href="Style.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Person Information</title>
  </head>
  <body>
    <div class="container">
      <h2>Fill the Form below</h2>
      <input class="inp firstname" type="text" placeholder="First Name" />
      <input class="inp lastname" type="text" placeholder="Last Name" />
      <input class="inp birthyear" type="number" placeholder="Birth Year" />
      <input class="inp birthplace" type="text" placeholder="Birth Place" />
      <button class="submit">Submit</button>
    </div>

    <div class="displayinfo"><p class="infotext"></p></div>
    <script src="script.js"></script>
  </body>
</html>

    EDIT: Added the corrected code
    EDIT 2: Correcting the corrected code

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search