Javascript text input devices

Question

I wrote the code to learn text input devices. However, this is the error i receive:

ReferenceError processForm is not defined

Can someone please help me fix the code ? The code is as follows:

   <body> 
       <h1>Text Input Devices</h1>
         <form action = "">
    <fieldset>
    <label> Normal text field</label>
    <input type = "text" id = "txtNormal" />
    <label>Password field</label>
    <input type="password" id ="pwd" />
    <label>Hidden</label>
    <input type ="hidden" id = "hidden" value = "I can't tell you it is hidden" />
    <textarea id = "txtArea" rows = "10" cols = "40>"> This is big text area and it can hold a lot of text</textarea>
    <button type = "button" onclick="processForm()">Click me</button>
    </fieldset>
    </form>  
    </body>
    <script type ="text/javascript">
    function processForm() {
    //Dohvati polja formulara
    var txtNormal = document.getElementById("txtNormal");
    var pwd = document.getElementById("pwd");
    var hidden = document.getElementById("hidden");
    var txtArea = document.getElementById("txtArea");
    // Spakuj u varijablu vrijednosti formulara
    var normal = txtNormal.value;
    var password = pwd.value;
    var secret = hidden.value;
    var bigText = txtArea.value;
    //Create output
    var result = ""
    result += "<dl> \n";
    result += "<dt>normal<\/dt> \n";
    result += "<dd> + normal + <\/dd> \n";
    result += "\n";
    result += "<dt>password<\/dt> \n";
    result += "<dd>" + password + "<\/dd> \n";
      result += "\n";
      result += "<dt>secret<\/dt> \n";
        result += "<dd>" +secret + "<\/dt> \n";
          result += "\n";
          result += "<dt>big text <\/dt> \n";
            result += "<dd>" +bigText + "<\/dt> \n";
              result += "<\/dl> \n";
              var output = document.getElementById("output");
              output.innerHTML = result;
    } //End function
    </script>

stacks · Accepted Answer · 2020-04-18 14:40:47Z

When I run your code the button is not the issue. Here is the error I get:

file.html:44 Uncaught TypeError: Cannot set property 'innerHTML' of null at processForm (file.html:44) at HTMLButtonElement.onclick (file.html:12) processForm @ file.html:44 onclick @ file.html:12

Your error comes from here :

var output = document.getElementById("output");
output.innerHTML = result;

What is output? It is not defined anywhere an element with an id called output in your HTML.

I assume your wanted to output the content of your normal, password and textarea field somewhere ? But only you can know.

Then just change your output definition to :

var body = document.getElementsByTagName("body")[0];
body.innerHTML += result;

As so your body will take the 3 values and output it below your fields when you click your button.

Also there is one mistake you made with " and + signs in order to get your normal's field value.

I fixed it for your, so your entire code should be like this:

<body> 
      <h1>Text Input Devices</h1>
        <form action = "">
   <fieldset>
   <label> Normal text field</label>
   <input type = "text" id = "txtNormal" />
   <label>Password field</label>
   <input type="password" id ="pwd" />
   <label>Hidden</label>
   <input type ="hidden" id = "hidden" value = "I can't tell you it is hidden" />
   <textarea id = "txtArea" rows = "10" cols = "40>"> This is big text area and it can hold a lot of text</textarea>
   <button type = "button" onclick="processForm()">Click me</button>
   </fieldset>
   </form>  
   </body>
   <script type ="text/javascript">
   function processForm() {
   //Dohvati polja formulara
   var txtNormal = document.getElementById("txtNormal");
   var pwd = document.getElementById("pwd");
   var hidden = document.getElementById("hidden");
   var txtArea = document.getElementById("txtArea");
   // Spakuj u varijablu vrijednosti formulara
   var normal = txtNormal.value;
   var password = pwd.value;
   var secret = hidden.value;
   var bigText = txtArea.value;
   //Create output
   var result = ""
   result += "<dl> \n";
   result += "<dt>normal<\/dt> \n";
   result += "<dd>" + normal + "<\/dd> \n";
   result += "\n";
   result += "<dt>password<\/dt> \n";
   result += "<dd>" + password + "<\/dd> \n";
     result += "\n";
     result += "<dt>secret<\/dt> \n";
       result += "<dd>" +secret + "<\/dt> \n";
         result += "\n";
         result += "<dt>big text <\/dt> \n";
           result += "<dd>" +bigText + "<\/dt> \n";
             result += "<\/dl> \n";
             var output = document.getElementsByTagName("body")[0];
             output.innerHTML += result;
   } //End function
   </script>

Collectives™ on Stack Overflow

Javascript text input devices

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related