Creating input textarea onchange

[ofeyofey]

Hi,
I have an input textarea which I would like to trigger the creation of another input textarea beneath it when a user stops typing.

Here is my attempt,
HTML,

<table class="inner" id="tableAdd">
                                         <tr>
                                             <td>Detail:</td><td><input type="textarea" id="add" name="action" value=""></td>
                                         </tr>
                                     </table>

Javascript

  <script>
                        function adder(){
                            var table = document.getElementById("tableAdd");
                            var row = document.createElement("tr");    
                            var cell = document.createElement("td");
                            var detail = document.createElement("input");
                            var detail.type = "textarea";
                            var detail.name = "blah";
                            cell.appendChild(input);
                            row.appendChild(cell);
                            table.appendChild(row);
                        }
                        
                    document.getElementById('add').onchange = adder;
                </script>

I get an error

SyntaxError: missing ; before statement

Which relates to this line,

var detail.type = "textarea";

Thanks if you can help,
Shane

[WolfShade]

It should be either <input type="text" or <textarea></textarea>. I’ve never seen <input type="textarea"

V/r,

[Paul_Wilkins]

The var statement should not be there, where you are adding the type and name properties to the already existing detail variable.

[ofeyofey]

@WolfShade

type=“text”

Thanks, that is now corrected anyway.

@Paul_Wilkins

where you are adding the type and name properties to the already existing detail variable.

I am not. I thought I didn’t need to. How do I actually do that then?

On MDN the first example on this page use var for all the variables.
Traversing an HTML table with JavaScript and DOM Interfaces
Is that wrong?
I have only changed “teaxtarea” to “text” and I am getting the same error as previously.

function adder(){
                            var table = document.getElementById("tableAdd");
                            var row = document.createElement("tr");    
                            var cell = document.createElement("td");
                            var detail = document.createElement("input");
                            var detail.type = "text";
                            var detail.name = "blah";
                            cell.appendChild(input);
                            row.appendChild(cell);
                            table.appendChild(row);
                        }

Thanks for your help,
Shane

[WolfShade]

Once a variable has been declared with var, you don’t use var for it, later. That breaks JavaScript.

                function adder(){
                    var table = document.getElementById("tableAdd");
                    var row = document.createElement("tr");    
                    var cell = document.createElement("td");
                    var detail = document.createElement("input");
                    detail.type = "textarea"; // remove var & change to text
                    detail.name = "blah";  // remove var
                    cell.appendChild(input);
                    row.appendChild(cell);
                    table.appendChild(row);
                }

[ofeyofey]

Ok I understand now so it is not needed for detail.type and detail.name.
Ok I will try that.
Thanks

[ofeyofey]

Brilliant working now.

function adder(){
                            var table = document.getElementById("tableAdd");
                            var row = document.createElement("tr");    
                            var cell = document.createElement("td");
                            var detail = document.createElement("input");
                            detail.type = "text";
                            detail.name = "blah";
                            cell.appendChild(detail);
                            row.appendChild(cell);
                            table.appendChild(row);
                        }

I also had a mistake in this line, ‘detail’ was ‘input’

Thanks,
Shane