向寬度屬性添加數字時出現問題

Question

單擊按鈕后，我的代碼應該每 200 毫秒使我的圖像變寬 1px，但我覺得它增加了 20-30。

這是我的代碼<img id="testimage" src="wall.png" width="50" height="25"/>

setInterval( function() {var im = document.getElementById("testimage");
    var newWidth = (im.getAttribute("width") ? im.getAttribute("width") : 0) + 1; //here
    im.setAttribute("width", newWidth); console.log(im.getAttribute)}, 200)
}

Answer 1

將寬度從字符串轉換為數字以執行加法而不是字符串連接。 這可以使用一元加運算符來完成。

var newWidth = (im.getAttribute("width") ? +im.getAttribute("width") : 0) + 1;

或者，直接更新width屬性，它是一個數字。

 let im = document.getElementById("testimage"); setInterval(function() { ++im.width; }, 200);

 <img id="testimage" src="https://via.placeholder.com/50x50" width="50" height="50"/>