如何避免为页面加载和 DOM 更改重复此特定代码？

Posted 2023-02-14

【中文标题】如何避免为页面加载和 DOM 更改重复此特定代码？

【英文标题】：How can I avoid repeating this particular code for page load and for DOM changes?

【发布时间】：2022-01-04 16:25:15

【问题描述】：

对于上下文，我正在构建一个 JS 计算器，当用户更改输入字段中的值（使用 <form> 元素）时，“摘要框”中显示的值会动态变化。

我已经在表单的<input> 元素中设置了默认值，但汇总框中的计算函数只有在输入字段中的值发生更改时才会作为 keyup 函数调用。

我已经设法让它完美地工作，但是，在页面加载时，摘要框的值不会改变，因为这是基于 keyup 函数（尚未发生），所以即使有默认值输入，摘要框没有什么可计算的（因为它正在等待 keyup 函数执行）。

现在，我找到了一种解决方法，通过重复 DOM 块来替换页面加载时的值，但代码不是很干。我相信一定有办法做到这一点。我试图将代码块放入数组和/或对象中，但无法成功提取并执行它。

// THESE ARRAY ITEMS REPRESENT THE INPUT FIELDS IN THE html
const innerElementsArr = [investment, buying, selling, invFee];

// APPLYING THE DOM CHANGES TO EACH INPUT ELEMENT ABOVE
innerElementsArr.forEach(item => 
  item.onkeyup = function() 
    invDisplay.innerText = `£$investment.value`;
    netProfit.innerText = `£$grossProfitLoss()`;
    invFeeDisplay.innerText = `£$withInvFee()`;
    netProfitLossDisplay.innerText = `£$netProfitDisplay()`;
  ;
);

// DISPLAY ALL CALCULATIONS ON PAGE LOAD
invDisplay.innerText = `£$investment.value`;
netProfit.innerText = `£$grossProfitLoss()`;
invFeeDisplay.innerText = `£$withInvFee()`;
netProfitLossDisplay.innerText = `£$netProfitDisplay()`;

如您所见，我在重复自己，并想知道是否有更清洁的方法来做到这一点。

提前谢谢你。

【问题讨论】：

嗯，你可以使用 javascript 的 window.onload 函数来检查这些输入字段中是否有任何值，然后如果存在，调用你的 calc 函数

将重复的块移动到一个新函数并在两个地方调用该函数。

谢谢@Ouroborus - 这是一个完美的答案，如此简单。另外，感谢您的 window.onload 技巧 Akshith。

【参考方案1】：

感谢 Ouroborus 的回答 - 这是一个非常简单的解决方法。

我创建了一个包含 DOM 块的函数，然后将该函数作为 keyup 事件和 window.onload 事件调用。

const valuesToChange = () => 
  invDisplay.innerText = `£$investment.value`;
  coinDisplay.innerText = `$coinsOwned() BTC`;
  netProfit.innerText = `£$grossProfitLoss()`;
  invFeeDisplay.innerText = `£$withInvFee()`;
  exitFeeDisplay.innerText = `£$withExitFee()`;
  netProfitLossDisplay.innerText = `£$netProfitDisplay()`;
;

// CHANGING THE VALUES IN THE SUMMARY AREA
const innerElementsArr = [investment, buying, selling, invFee, exitFee];
innerElementsArr.forEach(item => 
  item.onkeyup = function() 
    valuesToChange();
  ;
);

// DISPLAY ALL CALCULATIONS ON PAGE LOAD
window.onload = function() 
  valuesToChange();
;