如何使用JS实现点击保存按钮将textarea输入内容展示到p标签

• 函数名大小写不匹配：HTML中按钮的onclick属性绑定的是Save()，但JS中实际定义的函数名为小写开头的save()，JS区分大小写，触发点击时找不到对应函数。
• 文本取值时机错误：代码在页面加载完成时就提前读取了textarea的初始值存入变量，后续用户输入内容不会更新该变量，点击保存时拿到的永远是页面初始的默认值。
• DOM ID拼写不匹配：JS中查找p标签用的ID是heiku_input，但HTML里p标签的实际ID是heiki_input，ID不一致无法找到目标元素。

<div>
    <div>
        <h2>你可以在下方输入框写下内容后点击保存</h2>
        <label for="heiku" class="label">你的俳句</label>
        <br />
        <textarea class="textarea" id="heiku" name="heiku" rows="4" cols="50">
            在此处写下你的俳句
        </textarea>
        <button class="button" id="submit" onclick="save()">保存</button>
        <p class="p" id="heiku_input"></p>
    </div>
</div>

<script>
function save(){
    // 每次点击保存时再获取textarea的最新输入值
    const heikuValue = document.getElementById("heiku").value;
    document.getElementById("heiku_input").innerText = heikuValue;
    console.log(heikuValue);
}
</script>

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