如何通过动态追加的button按钮修改对应已追加p标签的overflow属性

问题根源 #

• 误用previousSibling：该属性会获取包括空白文本、注释在内的所有节点，插入p标签和按钮的过程中可能存在空白节点，导致无法定位到对应p元素，应该使用previousElementSibling，该属性仅会获取前一个同级元素节点。
• 错误设置overflow属性：直接给元素设置自定义属性overflow并不会生效，overflow是CSS样式属性，需要通过style.overflow修改，也可以通过切换CSS类实现效果。
• 存在无效DOM选择笔误：代码中document.getElementById("resultat")对应的节点不存在，HTML里的笔记容器id为result，该冗余代码可直接删除。
• 重复绑定点击事件：同时用addEventListener和onclick绑定提交按钮的点击事件，容易出现逻辑冲突。

修复方案 #

清理冗余代码并修改按钮点击逻辑即可，修复后的完整JS代码如下：

let add = document.getElementById("addNote");
let resultContainer = document.getElementById("result");
let y = 1;

var addANote = function () {
    let contenu = document.getElementById("saisie").value;
    // 创建p标签
    var newP = document.createElement("p");
    var newText1 = document.createTextNode(`Note ${y} \n ${contenu}`);
    newP.appendChild(newText1);
    // 创建详情按钮
    var bouton = document.createElement('button');
    bouton.innerHTML = "Details";
    // 插入到笔记容器
    resultContainer.appendChild(newP);
    resultContainer.appendChild(bouton);
    // 绑定点击事件
    bouton.addEventListener("click", function() {
        const targetP = this.previousElementSibling;
        // 支持切换显示/隐藏，不需要切换直接删除判断逻辑，只保留修改为visible的代码即可
        if(targetP.style.overflow === "visible") {
            targetP.style.overflow = "hidden";
            targetP.style.whiteSpace = "nowrap";
        } else {
            targetP.style.overflow = "visible";
            targetP.style.whiteSpace = "normal"; // 实现长文本自动换行，优化展示体验
        }
    });
}

add.addEventListener("click", function(e) {
    e.preventDefault(); // 统一在这里阻止表单默认提交行为
    addANote();
    y++;
    // 提交后清空文本框，优化使用体验
    document.getElementById("saisie").value = "";
})

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