Question

使用JavaScript显示下面列出的textarea元素中输入内容的列表。提交的值会暂时显示，但在调用函数后立即从数组中删除。有人愿意解释原因吗？

HTML

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <link rel='stylesheet' type='text/css' href='template.css'>
</head>
<body>
    <header id='title'>
        <h1></h1>
        <h2></h2>
    </header>
    <div id='main_container'>
        <div id='chat'>

            <form id='messaging'>
                <textarea id='current_msg'></textarea>
                <input type='submit' value='send'>
            </form>
            <ul id='msg_list'>
            </ul>
        </div>
    </div>
    <script type='text/javascript' src='client.js'></script>
</body>
</html>

的JavaScript

var msgList=[];
var form=document.getElementById('messaging');
var currentMsg=document.getElementById('current_msg');
var chat=document.getElementById('chat');
var ul=document.getElementById('msg_list');

function addText() {
    if(currentMsg.value.length>0) {
        if(msgList.length>=25) msgList.pop();
        msgList.unshift(currentMsg.value);
        currentMsg.value='';
        console.log(msgList.length);
    }

    var concat='';

    for(var index=0; index<msgList.length; index++) {
        concat+='<li>'+msgList[index]+'</li>';
    }

    ul.innerHTML=concat;
}

if(document.addEventListener) {
    form.addEventListener('submit', function() {
        addText();
    },
    false);
}else {
    form.attachEvent('onsubmit', function() {
        addText();
    },
    false);
}

Answer 1

你需要了解形式的影响：

1）用户输入一些值

2）提交表单一旦提交，由于您没有指定操作，它将默认重新加载当前网页，这意味着所有输入都将被清除

3）html页面从头开始解析，JS代码运行但它只会访问此时为空的输入的新值

要完成这项工作，您需要删除表单标记

调用函数后，JavaScript指定的数组值被删除

1 个答案: