我正在嘗試rectangle.style.width = "100px";使用 parseInt 變成一個變數，這樣我就可以將該變數放入兩個按鈕中，這樣我就可以增加或減少矩形的寬度。但是，無論我做什么，我似乎都無法將資訊放入變數中。
我的兩個函式非常相似，唯一的區別是一個減法，另一個加法。
//does not work as supposed to
function shrinkBtn() {
myWidth= myWidth - 10 "px";
//works but does not have the element as a variable
function shrinkBtn() {
rectangle.style.width = parseInt(rectangle.style.width)- 10 "px";
}
我本以為這會非常簡單，但我沒有從以前的帖子或谷歌搜索中找到任何答案。
面對這個問題時，我嘗試了幾種不同的方法。我努力了
var myWidth = rectangle.style.width;
var myWidth = parseInt(rectangle.style.width);
當我將它放在諸如 console.log(myWidth) 之類的控制臺日志中時，我確實得到了輸出，但是當我嘗試將它放在我的其他函式中時，它似乎不起作用。我期望能夠將資訊存盤到變數中，然后將其放入我的函式中，例如
function shrinkBtn() {
myWidth = parseInt(myWidth) -10 "px";
}
或者
function shrinkBtn() {
myWidth = myWidth - 10 "px";
}
編輯：添加完整代碼
rectangle.style.width = "100px";
// rectangle.style.width = parseInt(rectangle.style.width) 10 "px";
var myWidth = parseInt(rectangle.style.width);
console.log(myWidth);
decreaseBtn.addEventListener("click", shrinkBtn);
increaseBtn.addEventListener("click", growBtn);
function shrinkBtn() {
//using the variable here does not trigger the function
myWidth = parseInt(myWidth) -10 "px";
//using this style below does trigger the function
// rectangle.style.width = parseInt(rectangle.style.width)- 10 "px";
}
function growBtn() {
//Original function without the variable to show comparison This works
rectangle.style.width = parseInt(rectangle.style.width) 10 "px";
}
uj5u.com熱心網友回復：
OP 可能會查看函式的bind方法。
因此，對于下一個提供的示例，沒有注冊處理函式，每次呼叫處理函式時每個函式都會查詢特定元素，但是確實創建并注冊了兩個處理函式，其中元素被系結為創建函式的this背景關系（OP 應該考慮兩種對系結物件進行操作的方法）。
function decreaseWidthOfBoundElement() {
this.style.width = parseInt(this.style.width, 10) - 10 "px";
}
function increaseWidthOfBoundElement() {
this.style.width = parseInt(this.style.width, 10) 10 "px";
}
function main() {
const elmNode = document.querySelector('#rectangle');
document
.querySelector('#shrink')
.addEventListener(
'click', decreaseWidthOfBoundElement.bind(elmNode)
);
document
.querySelector('#increase')
.addEventListener(
'click', increaseWidthOfBoundElement.bind(elmNode)
);
}
main();<div id="rectangle" style="width: 100px; height: 100px; background-color: red;"></div>
<button id="shrink">-</button>
<button id="increase"> </button>此外，還可以系結引數，這為更改元素大小的自定義提供了更多選項（例如，僅實作一個函式，然后用于系結）。
function changeSizeOfBoundElement(deltaX = 0, deltaY = 0) {
this.style.width = parseInt(this.style.width, 10) deltaX "px";
this.style.height = parseInt(this.style.height, 10) deltaY "px";
}
function enableElementChange(changeRoot) {
const changeNode = changeRoot
.querySelector('[data-element]');
const decreaseNode = changeRoot
.querySelector('[data-decrease-values]');
const increaseNode = changeRoot
.querySelector('[data-increase-values]');
const decValues = decreaseNode.dataset.decreaseValues
.split(',').map(value => Number(value.trim()));
const incValues = increaseNode.dataset.increaseValues
.split(',').map(value => Number(value.trim()));
decreaseNode
.addEventListener(
'click', changeSizeOfBoundElement
.bind(changeNode, ...decValues)
);
increaseNode
.addEventListener(
'click', changeSizeOfBoundElement
.bind(changeNode, ...incValues)
);
}
document
.querySelectorAll('[data-element-change]')
.forEach(enableElementChange);[data-element-change] { margin-bottom: 20px; }<div data-element-change>
<div data-element style="width: 70px; height: 70px; background-color: orange;"></div>
<!-- data-decrease-values="<deltaX>,<deltaY>" -->
<button data-decrease-values="-10">-</button>
<button data-increase-values="10"> </button>
</div>
<div data-element-change>
<div data-element style="width: 200px; height: 50px; background-color: purple;"></div>
<!-- data-decrease-values="<deltaX>,<deltaY>" -->
<button data-decrease-values="-20,-5">-</button>
<button data-increase-values="20,5"> </button>
</div>uj5u.com熱心網友回復：
我們沒有完整的片段，所以不太容易回答！
區域變數問題（local，global，rewrite）？就像你的函式 myWidth= myWidth - 10 "px";... myWidth???
未選擇元素？？？
你離路不遠...
document.querySelector('#shrink').addEventListener('click', function() {
const rectangle = document.querySelector('#rectangle');
rectangle.style.width = parseInt(rectangle.style.width) - 10 "px";
})
document.querySelector('#increase').addEventListener('click', function() {
const rectangle = document.querySelector('#rectangle');
rectangle.style.width = parseInt(rectangle.style.width) 10 "px";
})<div id="rectangle" style="width: 100px; height: 100px; background-color: red;"></div>
<button id="shrink">-</button>
<button id="increase"> </button>為了更好地理解，我已經放置了 2 個函式。它可以被簡化。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/536631.html
下一篇：C中沒有變數的函式的列印值