如何实现输入框内容输入、删除时的实时同步显示效果

以下是你代码中存在的所有问题及修复方案：

存在的问题 #

• 触发事件不符合需求：onchange事件仅会在输入框失去焦点时触发，无法实现键入内容时立即同步，需要替换为oninput事件
• 元素ID格式错误：LastName输入框的ID值" last-name"存在前置空格，导致getElementById("last-name")无法匹配到对应元素
• DOM取值错误：getElementsByClassName返回的是同类名元素的集合，不能直接操作innerHTML，需要指定下标[0]获取第一个匹配元素
• 变量名引用错误：第二行赋值语句使用了未定义的outputFirstName变量，实际应该赋值inputLastName
• 可选优化：LastName的label标签for属性值错误，原写为name，应改为对应输入框的IDlast-name，保证点击label可以聚焦到输入框

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
    <link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="output-box">
   <p class="Output-text"></p>
   <p class="Output-text2"></p> 
</div>

<div class="forms">
    <form action="POST">
        <label class="label" for="name">First Name:</label>
        <input type="text" id="name" name="first-name" oninput="GetAndDisplayInput()">
        <br>
        <br>
        <label class="label" for="last-name">Last Name:</label>
        <input type="text" id="last-name" name="last-name" oninput="GetAndDisplayInput()">
    </form>
</div>
<script>
    function GetAndDisplayInput(){
        var inputFirstName= document.getElementById("name").value;
        var inputLastName= document.getElementById("last-name").value;
        document.getElementsByClassName("Output-text")[0].innerHTML = inputFirstName;
        document.getElementsByClassName("Output-text2")[0].innerHTML = inputLastName;
    }
</script>
</body>
</html>

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