How do I send a variable from a JavaScript function to a text box?

Question

Possible Duplicate:
Set the value of a input field with javascript

Okay so I am trying to get the result of my function to go back into the input box (This is part of a calculator). An example is: I enter 1 into the calculator it then does 1+2+3+4+5+6+7+8+9+10 and outputs 55 into an alert message box via the function below. I am trying to get the result to be shown back inside the box instead of an alert box.

Below I have provided the code for: The "L" function, The "input" Box, and the Button onClick that controls the function.

I have been at this for about a week trying to figure it out. If you need more code from the calculator I can provide it.

function Loop(input)
{
     var num = parseInt(input) + 10;
     var i=0;
     var sum=0;

    while(i < num)
        {
            sum=sum+i;
            i++;
        }
    alert(sum);

}

<input type="button" value="   L    " name="L" onClick="Loop(this.form.display.value)">

<form><input name="display"  id="input" size=25><form>

Here is the rest of the code seeing as the two answers I got below did not work (Thanks for trying to hep though!)

<html> 
<head>
<title>Assignment 2</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Functions
function addChar(input, character) 
{
if(input.value == null || input.value == "0")
    input.value = character;
else
    input.value += character;
}

function changeSign(input) 
{
if(input.value.substring(0, 1) == "-")
    input.value = input.value.substring(1, input.value.length);
else
    input.value = "-" + input.value;
}

function compute(form)  
{
    form.display.value = eval(form.display.value);
}

function Loop(input)
{
     var num = parseInt(input) + 10;
     var i=0;
     var sum=0;

    while(i < num)
        {
            sum=sum+i;
            i++;
        }
    document.getElementById("input").value=sum;

}
// End -->
</SCRIPT>
</head>
<body>
<div align="center">
<span style="font-weight:bold" size="20">Calculator</span>
<br>
<!-- Prints my name -->
<form  name="MyName" id="form1" style="font-weight:bold" size="20">
<script>
document.write("Mallery, Cody");
</script>
</form>
<!-- functions -->

<!-- The Calculator! -->
<center><form>
<table border=4>
<tr>
<td>
<input name="display"  id="input" size=25>
<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="    7    " onClick="addChar(this.form.display, '7')">
<input type="button" value="    8    " onClick="addChar(this.form.display, '8')">
<input type="button" value="    9    " onClick="addChar(this.form.display, '9')">
<input type="button" value="    /    " onClick="addChar(this.form.display, '/')">
<br>

<input type="button" value="    4    " onClick="addChar(this.form.display, '4')">
<input type="button" value="    5    " onClick="addChar(this.form.display, '5')">
<input type="button" value="    6    " onClick="addChar(this.form.display, '6')">
<input type="button" value="    *    " onClick="addChar(this.form.display, '*')">
<br>

<input type="button" value="    1    " onClick="addChar(this.form.display, '1')">
<input type="button" value="    2    " onClick="addChar(this.form.display, '2')">
<input type="button" value="    3    " onClick="addChar(this.form.display, '3')">
<input type="button" value="    -    " onClick="addChar(this.form.display, '-')">
<br>

<input type="button" value="   0     " onClick="addChar(this.form.display, '0')">
<input type="button" value="    N    " onClick="changeSign(this.form.display)">
<input type="button" value="    +    " onClick="addChar(this.form.display, '+')">
<input type="button" value="   C   " onClick="this.form.display.value = 0 ">
<br>
<input type="button" value="   L    " name="L" onClick="Loop(this.form.display.value)" 
                                               title="If the L button is pressed, the digit present in the results box will be looped through and added up to the 'digit plus 10'.For example: After the calculator has been reset. The user can press the 1 button, then the L button 55 should be displayed in the calculator 1 + 10 = 11, therefore start with 1 and loop until less than 11 adding all of the numbers 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55">
<input type="button" value="   =    " name="enter" onClick="compute(this.form)">
</td>
</tr>
</table>

`getElementbyId` should be `getElementById`. Have a look the console for error messages! Don't just blindly copy and paste code, investigate! — Felix Kling, Oct 14 '12 at 07:34
Shoot , I posted the wrong code into the post. I should have cought that error! sorry. — Cody Mallery, Oct 14 '12 at 07:44

polin · Accepted Answer · 2012-10-14T07:36:48.760

4

Put this in line in your JS function instead of your alert

document.getElementById("input").value=sum;

edited Oct 14 '12 at 07:36

answered Oct 14 '12 at 07:28

polin

2,745
2
15
20

`getElementbyId` should be `getElementById`. – Felix Kling Oct 14 '12 at 07:33
yes.you are right. Actually i wrote it here directly. But it works – polin Oct 14 '12 at 07:34
Capital `B` instead of lower-case `b`. – Felix Kling Oct 14 '12 at 07:35
That does not work. Thanks though!. I used capital B as well. – Cody Mallery Oct 14 '12 at 07:36
Yes and I've updated my code. And thanks to you people also – polin Oct 14 '12 at 07:37
@Cody: Works for me: http://jsfiddle.net/BFMBK/. There might be something else wrong with your script, check the console for errors. – Felix Kling Oct 14 '12 at 07:38
Alright Ill check that. Thank you. – Cody Mallery Oct 14 '12 at 07:45

score 0 · Answer 2 · answered Oct 14 '12 at 07:21

0

I am assuming you input text field is properly written with type="text".

You can assign an id to the element and then set its value using javascript. Get the object using document.getElementbyId("<Id>")

and then set the value document.getElementbyId("<Id>").value=<value>

answered Oct 14 '12 at 07:21

Subir Kumar Sao

8,171
3
26
47

I have edited the OP , because I think in order to help me you guys will require more information on what I am actually trying to do. – Cody Mallery Oct 14 '12 at 07:31

score 0 · Answer 3 · answered Oct 14 '12 at 07:21

0

Try

document.forms[0].display.value=sum;

answered Oct 14 '12 at 07:21

Wolfgang Stengel

2,867
1
17
22

This did not work either , Thanks though. – Cody Mallery Oct 14 '12 at 07:41
In your code you have "form" instead of "forms". – Wolfgang Stengel Oct 14 '12 at 07:45
Please remove the getElementByID before trying again, it contains an error which stops the script at that point. – Wolfgang Stengel Oct 14 '12 at 07:47

enhzflep · Answer 4 · 2012-10-14T07:37:50.587

0

You just need to make 3 changes. Then you can use the same function on any text-input, just like you can now.

First you want to pass the element itself to the function

function Loop(input)
{

becomes

function Loop(inputElement)
{
  var input = inputElement.value;

Next, change your alert output statement into this:

inputElement.value = sum;

Finally, change your html (remove the '.value')

onClick="Loop(this.form.display)"

edited Oct 14 '12 at 07:37

answered Oct 14 '12 at 07:30

enhzflep

12,927
2
32
51

That did not work. thanks though. – Cody Mallery Oct 14 '12 at 07:41
http://jsfiddle.net/enhzflep/zct36/ – enhzflep Oct 14 '12 at 10:37

Pato · Answer 5 · 2012-10-14T07:38:52.980

0

You are not retreving the input value correctly. You can do it like this:

<input name="display" id="input1" size="25">
<form>
    <input type="button" value="   L    " name="L" onClick="Loop()">
<form>
<script type="text/javascript">

function Loop()
{
    var input = document.getElementById("input1").value;
    var num = parseInt(input) + 10;
    var sum=0;

    for(var i=0; i<num; i++)
    {
        sum = sum+i;
    }

    document.getElementById("input1").value = sum;
}

</script>

I also replaced the while with a for, as in this case it is easier to read in my opinion.

edited Oct 14 '12 at 07:38

answered Oct 14 '12 at 07:30

Pato

671
6
17

It works correctly I am trying to get the output to go back into the "input" element and not into an Alert message. Thanks for the help though! :) – Cody Mallery Oct 14 '12 at 07:35

score -1 · Answer 6 · answered Oct 14 '12 at 07:48

<input type="button" value="   L    " name="L" onClick="Loop(this.form.display.value)">

this here reffers to <input> and it doesn't have form, your document has a form, so: document.forms[0].display.value will give you what you need;

For your update:
http://jsfiddle.net/jNqEv/3/

function Loop(input)
{
     var num = parseInt(input) + 10;
     var i=0;
     var sum=0;

    while(i < num)
        {
            sum=sum+i;
            i++;
        }
    // NOTE: it's not a good idea to give an item `input` ID;
    document.getElementById("input").value=sum; // instead of document.getElementbyId("input").value=sum; 
    // what's this for?
    // document.form[0].display.value=sum; 
}

How do I send a variable from a JavaScript function to a text box?

6 Answers6