Reading inputs and printing variables - JavaScript and HTML 4.01

Question 1

Step 1 is to use HTML 5, indent your code, and use semicolons.

<!DOCTYPE html>

<html>
    <head>
        <title> Page 1 </title>

        <script>
        function myFunction() {
            var x = document.getElementById("myEmail");
            document.write(x);
        }
        </script>
    </head>
    <body>
        <form>
            <p> Input your email </p>
            <input name="myEmail" type="text">
        </form>

        <button type="button" onclick="myFunction()">Submit Email</button>
    </body>
</html>

Step 2 is to look at what’s being written, see that it’s null, intuit when document.getElementById would return null, and realize that there is no element with an id of myEmail in your document. It just has a name. Drop the form while you’re at it.

<body>
    <p>Input your email </p>
    <input id="myEmail" type="text">
    <button type="button" onclick="myFunction()">Submit Email</button>
</body>

The next step is to try that again and realize that x is an element, not a string, and you want to get its value.

function myFunction() {
    var x = document.getElementById("myEmail");
    document.write(x.value);
}

The “good future practice” steps are, in no particular order:

Put your script at the bottom and stop using inline event listeners
Put your script in an external file
Use a <label>

If you’re not going to do something more useful than write the e-mail back, consider also using document.body.appendChild(document.createTextNode(…)), which will not obliterate the rest of the document. The DOM is really great.

Question 2

Add an id to the input

<input name="myEmail" type="text" id="myEmail">

then write the value

document.write(x.value)

Question 3

document.getElementById returns the DOM element. Printing the DOM element is not meaningful and its output may vary by browser.

What you want is to print the input value of the input field, so check the value property:

function myFunction()
{
var x=document.getElementById("myEmail").value
document.write(x)
}

Secondly, your HTML code does not have an ID attribute on the element, so the getElementById lookup will fail. Add an ID:

<input name="myEmail" type="text" id="myEmail">

Regarding your note about HTML 4 vs. HTML 5.

NOTE: I don't want to use HTML5 because it removes some of the tags that I like, so could we use HTML 4.01 or something?

That comment is interesting. Without knowing specifically which tags you are referring to, I cannot say why they are removed, but I imagine there is likely an equivalent. HTML 5 does not remove any capabilities of HTML that I am aware of.

That is like saying you won't drive a car with an automatic transmission because it doesn't have a clutch.

Question 4

All you have to do is add an id attribute having the same value as the value of your name attribute of input type="text" and modify your script to store value instead of the element itself.

<html>
<head>
<title> Page 1 </title>
<script>
    function myFunction()
    {
    var x=document.getElementById("myEmail").value;
    document.write(x);
    }
</script>
</head>
<body>
    <form>
    <p> Input your email </p>
    <input name="myEmail" id="myEmail" type="text">
    </form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</html>