javascript - 如何使用 Javascript 在每次点击时添加段落的宽度？

Question

我希望能够通过使用 Javascript 每次点击来为我的段落添加宽度。我究竟做错了什么？这是我的代码:

let button = document.querySelector("button");

    button.addEventListener("click",function(e) {

    let p = document.querySelector("p");
    if(window.getComputedStyle(p).getPropertyValue("width")==="10px")
    {
        p.style.width = "10px";
        p++;
    }
    else 
    {
        console.log(false)
    }
});

p {
    box-shadow: 0 4px 8px rgb(0,0,0,0.4);
    height: 40px;
    width: 10px;
    display: block;
}

<button>click!</button>
<p>my paragraph</p>

Answer 1

你的 if 条件是错误的，因为你想在每次点击时改变 width。第一次单击后，宽度 将为 20px，因此不会再次满足条件。相反，您想要检查 width 是否具有特定值。

Notice that I am checking var widthValue because it seems I cannot check the value of p.style.width

var widthValue = 10;

document.querySelector("button").addEventListener("click", function() {
    var p = document.querySelector("p");

    if(widthValue < 100) {
        p.style.width = `${widthValue}px` ;
    }
    widthValue += 10;
});

p {
    box-shadow: 0 4px 8px rgb(0,0,0,0.4);
    height: 40px;
    width: 10px;
    display: block;
}

<button>click!</button>
<p>my paragraph</p>