Question

我正在尝试显示多个用户输出，以便在文本字段中输入内容时，它会被捕获并显示在div中。

目前它不断覆盖新结果，而不是添加到已经显示的内容。

任何人都可以帮忙吗？

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

Answer 1

待办事项

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

代替。

这将连接您的值并在文本末尾添加换行符，以创建“列表”。请注意=+和+ '<br />的差异。

Answer 2

你也可以试试这个

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

使用JavaScript显示多个用户输出

2 个答案: