Using user input as a variable in Javascript?

Question

I am trying to make a sample webpage that asks users for an integer, and if it is between 1 and 12, it will return the corresponding day of christmas (8th day of christmas: 8 maids a milking, etc.)

I am not very experienced with javascript, but I am not aware of any other way to make the program work in html. Python is not an option, sadly. I am stuck while trying to gather a user-provided integer as a variable which the webpage then displays. My code is below. Any help or suggestions are greatly appreciated.

<!>
<html>
<head>
<title> Merry Christmas! </title>
</head>
<body>
<input type="number" id="inputfield1" name="inputfield1" />
<input type="submit" id="Submit" text="Submit" onclick="compute()" />
<script type = "text/javascript">

function compute(){
    var cday = document.getElementByName("inputfield1");
    document.write(cday);
}
</script>
</body>
</html>

var cday = document.getElementByName("inputfield1").value; — pistou
– pistou, Commented Dec 22, 2016 at 14:33
You have the input element, you need its .value property to get what the user typed. Stick a + just before it (ie. before document.) to convert it to a number. You need an array of values, and just get the corresponding one. Easy, right? — Niet the Dark Absol
– Niet the Dark Absol, Commented Dec 22, 2016 at 14:33
@KevinKloet That doesn't matter, inline event handlers are only evaluated at trigger-time. — Niet the Dark Absol
– Niet the Dark Absol, Commented Dec 22, 2016 at 14:33

Thomas Juranek · Accepted Answer · 2016-12-22 14:57:19Z

The problem with your page is you need to get the value of the input based off of its id.

var cday = document.getElementById("inputfield1").value;

A better solution is to add an event listener to your input. The onclick attribute isn't best practice today and event listeners are the more widely accepted solution. Here is an example:

<!DOCTYPE html>
<html>
<body>

	<input type="number" id="inputInteger" />
	<input type="submit" id="btnSubmit" text="Submit" />
    
    <p id="result"></p>

	<script type = "text/javascript">
        // Event Listener that Runs "Compute()" on a Click
        document.getElementById("btnSubmit").addEventListener("click", compute);

        // Gets Input Value and Displays it in a <p>
        function compute() {
            var day = document.getElementById("inputInteger").value;
            document.getElementById("result").innerHTML = day;
        }
    </script>
</body>
</html>

Mathieu · Accepted Answer · 2016-12-22 15:13:40Z

1

document.getElementByName doesn't exist. you can either use document.getElementById("inputfield1") or document.getElementsByName("inputfield1")[0]

then you will have a dom element, not the input value, you can access the value with the value property of the element:

var cday = document.getElementById("inputfield1").value;

edited Dec 22, 2016 at 15:13

answered Dec 22, 2016 at 14:33

Mathieu

5,7033 gold badges34 silver badges48 bronze badges

3 Comments

CodenameLambda Over a year ago

He is using the name attribute, not the id attribute.

Mathieu Over a year ago

the attribute have both the same name and id, and document.getElementByName is not a function

Thomas Juranek Over a year ago

This is a fine way to get the value, but it is also worth suggesting an event listener.

CodenameLambda · Accepted Answer · 2016-12-22 14:36:13Z

You want to use the value field of DOM elements:

<html>
    <head>
        <title> Merry Christmas! </title>
        <meta charset="utf-8" /> <!-- you don't have to do that, but it can help when you are to lazy using the `&...;` escapes -->
    </head>
    <body>
        <input type="number" id="inputfield1" id="inputfield1" />
        <input type="submit" id="Submit" text="Submit" onclick="compute()" />
        <script type="text/javascript">
            function compute() {
                var cday = document.getElementById("inputfield1").value;
                document.write(cday);
            }
        </script>
    </body>

I used the ID here, as multiple elements can have the same name. If you want to use name though, replace id="..." with name="..." (as it was before) and document.getElementById("...").value with document.getElementsByName("...")[0].value.

Collectives™ on Stack Overflow

Using user input as a variable in Javascript?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related