Displaying a variable in HTML when using createElement() method-CodePudding

I am trying to learn the best way to get input from inside HTML and then use that in JavaScript and then be able to print that back into HTML. Basically in this I just want to take in the first name and then display it. Ultimately I will use this on more information than just the first name but just trying to learn the best way to do it. Please let me know if I am completely off base with what I am trying to do. Trying to teach myself. Thanks so much.

const getInfo = () => {
  let firstName = document.getElementById("fName").value;
  let addfName = document.createElement("h3")
  firstName.id = 'strainDisplay'
  firstName.innerHTML = "First Name: "   firstName
  document.body.appendChild(firstName)
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <span>Enter Info: </span>
  <table>
    <form onsubmit="getInfo()">
      <tr>
        <th>
          <span>Enter First Name: <br /></span>
        </th>
        <th>
          <input type="text" id='fName' />
        </th>
      </tr>
      <tr>
        <th>
          <input type="submit">
        </th>
      </tr>
    </form>
  </table>



<script src="./main.js"></script>
</body>

</html>

CodePudding user response：

const getInfo = event => {
  event.preventDefault();
  document.getElementById("strainDisplay")?.remove();
  let firstName = document.getElementById("fName").value;
  let addfName = document.createElement("h3")
  addfName.id = 'strainDisplay'
  addfName.innerHTML = "First Name: "   firstName
  document.body.appendChild(addfName)
}

<!DOCTYPE html>
<html>
<title>Title</title>
<head>
</head>
<body>
    <span>Enter Info: </span>
  <table>
    <form onsubmit="getInfo(event)">
      <tr>
        <th>
          <span>Enter First Name: <br /></span>
        </th>
        <th>
          <input type="text" id='fName' />
        </th>
      </tr>
      <tr>
        <th>
          <input type="submit">
        </th>
      </tr>
    </form>
  </table>
</body>
</html>

Use event.preventDefault(); to prevent reloading the ?. written above runs the remove method only if the element wasn't undefined

note: I edited Fahimazaz Bhanej snippet

CodePudding user response：

You linked id and innerHTML attribute with firstName it's wrong and also append Textbox. it should be addfName.id, addfName.innerHTML and document.body.appendChild(addfName).

Here down is modified code:

const getInfo = event => {
  event.preventDefault();
  let firstName = document.getElementById("fName").value;
  let addfName = document.createElement("h3")
  addfName.id = 'strainDisplay'
  addfName.innerHTML = "First Name: "   firstName
  document.body.appendChild(addfName);
}

<!DOCTYPE html>
<html>
<title>Title</title>
<head>
</head>
<body>
    <span>Enter Info: </span>
  <table>
    <form onsubmit="getInfo(event)">
      <tr>
        <th>
          <span>Enter First Name: <br /></span>
        </th>
        <th>
          <input type="text" id='fName' />
        </th>
      </tr>
      <tr>
        <th>
          <input type="submit">
        </th>
      </tr>
    </form>
  </table>
</body>
</html>