CODEWITHSUNDEEP
javascriptjqueryhtml
userdanhas1994
userdanhas1994

Reputation: 55

passing/displaying values from JavaScript to HTML page

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);
        }
    }

Upvotes: 1

Views: 81

Answers (2)

Burki
Burki

Reputation: 1216

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.

Upvotes: 1

Sushant Yadav
Sushant Yadav

Reputation: 726

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);
    }

}

Upvotes: 0

Related Questions