javascript - 重复 onClick 函数 - 选项

Question

我想在每次调用 onClick 函数时添加 100 像素(或任意数字)的 CSS 高度。

点击“button1”-CSS增加100px的高度-再次点击“button1”-CSS增加100px的高度等

这是一个循环吗？它是 If 语句吗？我应该放弃并继续做产品经理吗？

var growButton = document.getElementById("box");
var growParse = parseInt(growButton.style.height, 10);

function grow() {
growButton.style.height = (growParse + 100) + "px";
}

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1" onclick="grow();">Grow</button>

Answer 1

您不需要成为产品经理。您只需要在函数内运行 growParse。

var growButton = document.getElementById("box");
var growParse = parseInt(growButton.style.height, 10);


function grow() {
  growParse = parseInt(growButton.style.height, 10);

  growButton.style.height = (growParse + 100) + "px";
}

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1" onclick="grow();">Grow</button>