Question

i am just tyring to write a simple code that would print a user’s input. here’s what i have:

<script type="text/javascript">
    function displayText() {
        var input = document.getElementById('input').value;
        document.getElementById('p').innerHTML = input;
        }
    }
</script>

and

<font face="arial" size="5" color="blue">Input section</font> <br/>
Query Sequence
<form name="form">
<textarea id="input" rows="8" cols="60" id="input" ></textarea><br/>
<button type="button" style="height: 25px; width: 100px" onClick="displayText()">Display Date</button><br/>
<p id="p"></p>
</form>

i have no idea why it doesn’t work…
and another little question: what is the difference between assigning an ID and a name to a form tag in html? thanks!

Answer 1

function displayText() {
    var input = document.getElementById('input').value;
    document.getElementById('p').innerHTML = input;
    } <--- extra brace
}

EDIT: in response to the note:

what is the difference between
assigning an ID and a name to a form
tag in html

An ID uniquely identifies the element, and can be used in either CSS styling, or to quickly obtain the element in JavaScript as you are doing.

The name attribute is what’s used by the server side to identify the element and get it’s value. For example:

<textarea id="input" name="textinput" rows="8" cols="60" id="input" ></textarea>

If this form was posted to a PHP script, you would access the value with like this:

echo $_POST['textinput'];

You can also navigate to elements using the name, but it’s not recommended.