JavaScript分配了调用函数后移除的数组值

JavaScript assigned array values removed after invoking function

本文关键字：数组 分配 调用 函数 JavaScript      更新时间：2023-09-26

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

您需要了解使用form:

的效果

1)用户输入一些值

2)一旦提交表单被提交，因为你没有指定动作，它将默认重新加载当前网页，这意味着所有的输入将被清除

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

要做到这一点，你需要删除表单标签
相关文章：