JS评论区动态元素问题：提交新内容无法生成对应元素

问题现象 #

制作了包含CSS和JS的评论区页面，输入不同的name和message后点击Submit按钮，期望生成对应内容的新元素。但实际测试时，第一次输入"harry"和"this is the message"提交后，重置输入新内容再提交，新生成的元素仍然显示第一次的信息。

问题原因 #

你的JS代码中，name和message变量是在页面加载时就获取了输入框的初始值，之后点击按钮的事件处理函数里没有重新获取输入框的最新值，所以每次提交都用的是最初存储的旧值。

修正后的代码 #

HTML部分（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div class="msg">
        <div class="items"></div>
        <div class="input">
                <input type="text" class="name" placeholder="Name">
                <input type="text" class="message" placeholder="Message">
                <button id="button">Submit</button>
                <button type="reset">Reset</button>
        </div>
    </div>
</body>
</html>

CSS部分（无需修改） #

html, body{
            padding: 0;
            margin: 0;
        }
        .msg{
            padding: 2em;
            margin: 2em;
            border-radius: 2vh;
            height: 70vh;
            display: flex;
            align-items: center;
            justify-content: left;
            flex-direction: column;
            background-color: #1e90ff;
        }
        .items{
            height: 65vh;
            overflow: scroll;
            color: white;
            width: 100%;
            overflow-x: hidden;
            margin: 10px;
        }
        input{
            padding: 10px;
            border: none;
            border-radius: 8px;
            outline: none;
            font-size: 1em;
        }
        #button{
            padding: 10px 20px;
            border-radius: 8px;
            border: none;
            font-size: 1em;
        }
        .button{
            padding: 10px 20px;
            border-radius: 8px;
            border: none;
            font-size: 1em;
        }
        .message-item{
            background-color: black;
            padding: 1em;
            border-radius: 8px;
            margin: 3px;
        }

JS部分（关键修改） #

let btn = document.getElementById('button');
let div = document.querySelector('.items')

btn.addEventListener('click', ()=>{
    // 每次点击按钮时，重新获取输入框的最新值
    let name = document.querySelector('.name').value;
    let message = document.querySelector('.message').value;
    
    let item = document.createElement('div')
    let inner = `
            <h3>${name}</h3>
            <p>${message}</p>
            `
    item.className = "message-item"        
    item.innerHTML = inner        
    div.append(item)
});

修改说明 #

把name和message变量的获取逻辑移到按钮点击事件的处理函数内部，这样每次点击Submit按钮时，都会重新读取输入框的当前值，就能正确生成对应新内容的评论元素了。

内容的提问来源于stack exchange，提问作者user21594231