How do I make text appear in text field with javascript?

Question

I'm relatively new to JavaScript and I can't seem to figure out how to output text in a textfield in HTML. I've looked at many solutions and although I'm very close (I think I am), I still can't get it to function properly.

I'm trying to sort a series of numbers by separating them with "; " and wish to show the result in the bottom text field by ascending or descending order. The action is done by pressing the button to sort them.

When trying to debug it, it seems that the variables are being assigned their values as they should, but the variable "output" just won't show up in the "Sorted Numbers" textfield. My code is incomplete as I'm just trying to test this for an ascending order before I add in the descending order.

Here is my code...

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>Sorting Numbers</title>
</head>
<body>


        Enter Numbers Here: <input type = "text" id = "numInput"><br><br>
        Select Option:      <select id = "menu">
                                <option value = "ascending">Ascending</option>
                                <option value = "descending">Descending</option>
                            </select><br><br>
        Sorted Numbers: <input type = "text" id = "numOut"><br><br>
        <button onclick = "sortNums()">Sort Numbers</button>


    <script type = "text/javascript">
        function sortNums() {
            var choice = document.getElementById("menu");
            var numbers = document.getElementById("numInput").value;
            var output = document.getElementById("numOut").value;

            if(choice.value = "ascending") {
                arr  = numbers.split('; ').sort().join('; ');
                output = arr;
            }

        }
    </script>
</body>
</html>

The script doesn't magically know, what you want to do with the value, you've to tell it ... — Teemu
– Teemu, Commented Feb 9, 2015 at 20:03
Your script is working fine and doing exactly what you tell it to. It creates three variables (choice, numbers, output), assigns their value, and sorts them, assigning the new order to a variable (arr). It then assigns the value of arr to the variable output. If you want output to show up you have to tell it to show up (see Spencer's answer below). — SRing
– SRing, Commented Feb 9, 2015 at 20:09
Thanks guys! I guess it was just a misconception I had on how these methods function — Dude420
– Dude420, Commented Feb 9, 2015 at 21:15

Spencer Wieczorek · Accepted Answer · 2015-02-09 20:03:36Z

5

Because you never assigned output to it afterwards:

if(choice.value = "ascending") {
    arr  = numbers.split('; ').sort().join('; ');
    output = arr;
    document.getElementById("numOut").value = output; 
}

answered Feb 9, 2015 at 20:03

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dude420 Over a year ago

Thank you, it worked! I just don't understand why writing the line output = arr; doesn't do the same thing as the line you've written in the if block. I only assigned the variable output to that just to make it look a bit cleaner. However, since it worked the way you typed it out for me, I might as well just cut out "output" completely and have document.getElementById("numOut").value = arr;

Spencer Wieczorek Over a year ago

@Dude420 Because output just contains the value of the element, and as such is not directly related. Think of it has changing the property of an object. For example I could say I have obj.x, if was say var y = obj.x and change y it will not change obj.x, the only way would be doing it directly obj.x = newValue.

Dude420 Over a year ago

I see, makes more sense, now thanks again for your help!

Collectives™ on Stack Overflow

How do I make text appear in text field with javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related