Passing Javascript variable into textbox

Question

I have a variable called totalScore:

totalScore = '<h2>Total Score: ' + parseInt(parseFloat(scorePrompt) +
                                                        parseFloat(scorePrompt2) +
                                                        parseFloat(scorePrompt3) +
                                                        parseFloat(scorePrompt4) +
                                                        parseFloat(scorePrompt5) +
                                                        '</h2>');

I need to pass the number stored inside totalScore to a textbox. I have not found a way to pass a variable to an html element, sorry if I am missing something very obvious I am new to javascript.

`document.getElementById('textboxid').text="your value"` isn't a simple? — Just code, Jul 18 '14 at 05:21

score 4 · Accepted Answer · edited Jul 31 '14 at 15:22

4

Try this:

document.getElementById('txtScore').value = totalScore;

edited Jul 31 '14 at 15:22

Julian Camilleri

2,582
1
22
33

answered Jul 18 '14 at 05:22

CodeSlayer

1,295
1
12
34

The number, not the generated HTML. – David Thomas Jul 18 '14 at 05:23
read my other answer below.. – CodeSlayer Jul 18 '14 at 06:42

danyamachine · Answer 2 · 2014-07-18T05:50:34.870

to give you some background on why we do what we do:
javascript gets its hooks into html via the DOM API. this accounts for most uses of js. what you are trying to do is two things: add an element to the html, and insert a text node inside that element. one doesn't really 'pass a variable' to an html element. one can turn a variable into a string, and append that, as a text node, to the DOM. so you might be looking for something like this:

totalScore = '<h2>Total Score: ' + parseInt(parseFloat(scorePrompt) +
parseFloat(scorePrompt2) +
parseFloat(scorePrompt3) +
parseFloat(scorePrompt4) +
parseFloat(scorePrompt5) +
'</h2>');
document.getElementById("myelementID").innerHTML = totalScore;

score 1 · Answer 3 · answered Jul 18 '14 at 05:21

1

document.getElementById("id").value =your value;

By using this you can assign value to textbox.

answered Jul 18 '14 at 05:21

PSR

38,073
36
106
149

score 1 · Answer 4 · answered Jul 18 '14 at 05:23

1

Pure JavaScript:

document.getElementById('myTextBox').value = 'myValue';

jQuery:

$('#myTextBox').val('myValue');

answered Jul 18 '14 at 05:23

Jason Watmore

4,362
2
30
36

Have you seen CodeSlayer's answer before adding yours? – Yang Jul 18 '14 at 05:24

score 1 · Answer 5 · edited Oct 17 '14 at 06:37

Just add this line of code

document.getElementById("{yourTextBoxId}").value= parseInt(parseFloat(scorePrompt) +
                                                        parseFloat(scorePrompt2) +
                                                        parseFloat(scorePrompt3) +
                                                        parseFloat(scorePrompt4) +
                                                        parseFloat(scorePrompt5);

just replace {yourTextBoxId} to id of your textbox.

By doing this you will get the number without html.

score 1 · Answer 6 · answered Jul 18 '14 at 05:27

try something like this

    totalScore = parseInt(parseFloat(scorePrompt) +
                    parseFloat(scorePrompt2) +
                    parseFloat(scorePrompt3) +
                    parseFloat(scorePrompt4) +
                    parseFloat(scorePrompt5);
    // if you want only number.
    document.getElemenyById('text_box_id').value = totalScore;

    // if you want number + string.
    totalScore = '<h2>Total Score: ' + totalScore + '</h2>');
    document.getElemenyById('text_box_id').value = totalScore;

score 1 · Answer 7 · edited Jan 15 '16 at 22:02

1

Here is the jQuery syntax

$('#yourTextboxID').val(totalScore)

or in HTML

document.getElementById('yourTextboxID').value=totalScore;

edited Jan 15 '16 at 22:02

marc_s

704,970
168
1,303
1,425

answered Jul 18 '14 at 05:42

LittleDragon

2,127
2
16
21

score 0 · Answer 8 · edited Oct 17 '14 at 06:55

why not try to put another variable..like this

var total =parseInt(parseFloat(scorePrompt) +                                                     parseFloat(scorePrompt2)+
                   parseFloat(scorePrompt3) +
                   parseFloat(scorePrompt4) +
                   parseFloat(scorePrompt5);

totalScore = '<h2>Total Score: ' + total +'</h2>';

//now you don't need to cut every character to check if it is numeric or not
document.getElementById('txtValue').value=total;

Passing Javascript variable into textbox

8 Answers8