Displaying multiple user outputs using JavaScript

Question

I am trying to display multiple user outputs, so that when something is entered in the text field, it is captured and displayed in the div.

At the moment it keeps overwriting with the new result rather than adding to what is already displayed.

Can anyone help with this?

HTML:

<!DOCTYPE HTML>

<html lang="en">
<!-- more meta data needs to go in here -->
<head>
    <script type="text/javascript"  src="main_app_javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="">
    <meta charset="UTF-8">
    <title>List Check</title>
</head>

<body>
    <input type="text" id="enter_box">
    <button onclick="output_function()"> Add To List </button>

    <div id="list_output"></div>

</body>

JavaScript:

function output_function() {
    var user_input = document.getElementById("enter_box").value;
    document.getElementById("list_output").innerHTML = user_input;
}

possible duplicate of [How to append data to div using javascript?](http://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript) — Dhiraj, May 31 '15 at 14:44

score 0 · Accepted Answer · answered May 31 '15 at 14:44

0

Do

document.getElementById("list_output").innerHTML += user_input + '<br />';

instead.

This will concatenate your value and add a line break at the end of the text, to create a "list". Notice the =+ and + '<br /> differences.

answered May 31 '15 at 14:44

Norman Breau

2,132
16
35

score 0 · Answer 2 · answered May 31 '15 at 17:52

You could also try this

    function output_function() {
        'use strict';
        var user_input  = document.getElementById("enter_box").value;
        var list_output = document.getElementById("list_output");

        if( list_output.innerHTML === '' ) {
            list_output.innerHTML = '<p>' + user_input + '</p>';
        } else {
            list_output.innerHTML += '<p>' + user_input + '</p>';
        }
    }

Displaying multiple user outputs using JavaScript

2 Answers2