CODEWITHSUNDEEP
javascripthtml
Sophia
Sophia

Reputation: 1

Why does my HTML code return [object HTMLFormElement]?

I'm very new to coding so I apologise for the obvious question, but I'm attempting to create a code in HTML which takes a user input value and prints the value underneath in the paragraph tag. If this doesn't make sense, here is my code so far and an image of the file.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form id="form">
      <input type="text" id="theInput" name="theInput">
    </form>
    <script type="text/javascript">
      function myFunction(){
        var input = document.forms["form"];
        document.getElementById("message").innerHTML = input
      }
    </script>
    <button onclick="myFunction()">
      Press me!
    </button>
    <p id="message"></p>
  </body>
</html>

screenshot of the error

Thank you!

Upvotes: 0

Views: 1026

Answers (1)

Strugglingwithbugs
Strugglingwithbugs

Reputation: 17

Use the below function to get the value from the text field using JS. Document.form is the wrong way to take the input text.

  function myFunction(){
    var input = document.getElementById("theInput").value;
    document.getElementById("message").innerHTML = input
  }

Happy Coding!

Upvotes: 1

Related Questions