新手求助：如何用JS修改HTML输出实现属性数值动态计算？

我是JS新手，正在制作一个简易GUI来学习JS，现寻求相关指导。我目前的HTML代码如下：

<li>Name: {nameSource}</li>
<li>Class: {charClassSource}</li>
<li>Level: {levelSource}</li>

<li><dt class="padt">Primary Attribute:</dt><dl class="padl"> {primaryAttributeSource} </dl></li>
<li><dt class="secdt">Secondary Attribute:</dt><dl class="secdl"> {secondaryAttributeSource} </dl></li>

<li><dt class="atidt1">{AttributeItem1}</dt><dl class="atidl1"> {AttributeItem1Source} </dl></li>
<li><dt class="atidt2">{AttributeItem2}</dt><dl class="atidl2"> {AttributeItem2Source} </dl></li>
<li><dt class="atidt3">{AttributeItem3}</dt><dl class="atidl3"> {AttributeItem2Source} </dl></li>

我的需求是：根据主属性（Primary Attribute）和副属性（Secondary Attribute）的数值动态修改对应Source内容，比如基础力量10+物品加成5时，主属性需显示为15。目前我仅需要基础功能的实现指导，尝试过定位class为padl的dl元素来替换内容，但不清楚具体操作方法。

基础实现步骤 #

1. 获取目标DOM元素

用document.querySelector()根据class定位到需要更新的元素：

// 获取主属性显示元素
const primaryAttrElement = document.querySelector('.padl');
// 获取副属性显示元素
const secondaryAttrElement = document.querySelector('.secdl');

2. 计算属性总数值

定义基础值和加成值，计算最终总和：

// 主属性：基础值 + 物品加成
const basePrimary = 10;
const itemBonusPrimary = 5;
const totalPrimary = basePrimary + itemBonusPrimary;

// 副属性同理
const baseSecondary = 8;
const itemBonusSecondary = 3;
const totalSecondary = baseSecondary + itemBonusSecondary;

3. 更新元素内容

用textContent（推荐，更准确处理文本内容）设置元素显示值：

// 更新主属性显示
primaryAttrElement.textContent = totalPrimary;
// 更新副属性显示
secondaryAttrElement.textContent = totalSecondary;

封装成可复用函数（可选）

如果需要多次触发更新（比如物品变化、等级提升时），可以把逻辑封装成函数：

function updateCharacterAttributes(basePrimary, bonusPrimary, baseSecondary, bonusSecondary) {
  const primaryEl = document.querySelector('.padl');
  primaryEl.textContent = basePrimary + bonusPrimary;
  
  const secondaryEl = document.querySelector('.secdl');
  secondaryEl.textContent = baseSecondary + bonusSecondary;
}

// 调用示例：当物品加成变化时
updateCharacterAttributes(10, 7, 8, 4);

内容的提问来源于stack exchange，提问作者xowjs