passing/displaying values from JavaScript to HTML page

Question

I have the following JS code which use's local storage to display the 'name' and 'age' entered previously:

This HTML code currently displays the date, time, name and age of a person in a table. how can i pass these values to be displayed in a HTML form as labels instead of in that table?

HTML only bringing back the start time, name and age aren't being displayed:

 <div id="history_list"></div>
    <div id="name"> </div>
    <div id="age"></div>

JS:

    function loadHistoryList() {

        for(var i = numberOfHistory; i >= 1; i--) {
            var historyData = new historyElement(db.getItem(i.toString()));

            if(historyData === null) {
                console.error('error');
                continue;
            }
            $('#history_list').append(historyData.startTime);
            $('#name').append(historyData.name);
            $('#age').append(historyData.age);
        }
    }

This looks like a homework question. Have you tried anything? — Burki
– Burki, Commented Apr 6, 2016 at 11:48
no this is not a homework question. yeah or course i've tried it. i have the value displaying on the HTML page but they are displaying more than once will update my question. — userdanhas1994
– userdanhas1994, Commented Apr 6, 2016 at 11:51
Are you talking about populating the form with pre-existing data? — Soubhik Mondal
– Soubhik Mondal, Commented Apr 6, 2016 at 12:01
yeah pretty much, i just want to display the local storage on a html page — userdanhas1994
– userdanhas1994, Commented Apr 6, 2016 at 12:02

Burki · Accepted Answer · 2016-04-06 12:19:20Z

1

instead of

var div = '<div id="history_element"><div id="element_title">' + historyData.startDate + '&nbsp;&nbsp;&nbsp;' + historyData.startTime + '</div><table>';
var div = '<div id="name"><tr><td>name: </td><td>' + historyData.name+ '</td></tr>';
var div = '<div id="age"><tr><td>age: </td><td>' + historyData.age+ '</td></tr>';

div += '</table></div>';

$('#history_list').append(div);
$('#name').append(div);
$('#age').append(div);

Do this:

$('#history_list').append(historyData.startTime);
$('#name').append(historyData.name);
$('#age').append(historyData.age);

In short: you can (and should in this case) simply add the desired value to the container (the DIV, Form field, or whatnot)

those three lines starting witn var div (...) are overwriting each previous line, but that is a side note.
Overall, you should read up more on JavaScript and/or JQuery.

answered Apr 6, 2016 at 12:19

Burki

1,22622 silver badges30 bronze badges

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

5 Comments

userdanhas1994 Over a year ago

i've added append name and age to my JS file. tried to call them in the HTML file but the start time is the only value appearing. should i be using <div id="name"></div> to display name value in HTML?

Burki Over a year ago

not sure what you mean, @userdanhas1994. With the HTML provided in your question (three divs) it should work fine.

userdanhas1994 Over a year ago

please see my updated question, i have the 3 div's in my updated question but it's still only displaying the start time

Burki Over a year ago

@userdanhas1994 your code should work. Are you sure that historyData.name and historyData.age have values? you might try alert (historyData.name); to make sure those are not empty.

userdanhas1994 Over a year ago

it was a problem with the css file i had it, works now thanks for your help :)

Sushant Yadav · Accepted Answer · 2016-04-06 12:17:52Z

To populate the form field First you have to add a form element like input field

HTML

<div id="history_list">
</div>
<input type="text" id="name" name="name">

JS

function loadHistoryList() {

for(var i = numberOfHistory; i >= 1; i--) {
        var historyData = new historyElement(db.getItem(i.toString()));

        if(historyData === null) {
            console.error('error');
            continue;
        }
        $('#name').val(historyData.name);
    }

}

Collectives™ on Stack Overflow

passing/displaying values from JavaScript to HTML page

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related