span与input值同步失败及计算器ROI计算异常问题求助

一、问题根源分析 #

1. <span>与<input>值不一致 #

调用setContentVal时传入了6个参数，但函数定义仅接收5个，导致参数错位：

• 调用时参数顺序：budget, clicks, calls, jobs, _p, ROI
• 函数定义参数：_budget, _calls, _jobs, _ppj, _ROI
  此时_jobs实际接收到的是calls而非jobs，所以span显示的是calls的值，和input的jobs不匹配。

2. roiTxt计算结果异常 #

同样因参数个数不匹配，_ROI实际接收到的是_p而非计算好的ROI，所以roiTxt只显示$+_p（如$120），而非预期的乘积结果。

3. 额外问题：HTML重复ID #

页面中有两个<span id="estJobs">，ID必须唯一，会导致选择器行为异常，违反HTML规范。

二、代码修复步骤 #

1. 修正JavaScript参数匹配 #

修改setContentVal函数的参数定义，匹配调用时的参数数量和顺序，同时修正类选择器的错误反斜杠：

function setContentVal(_budget, _clicks, _calls, _jobs, _ppj, _ROI){
    $(".estJobs").text(_jobs);
    $("#ppjTxt").text("$"+_ppj);
    $(".roiTxt").text("$"+_ROI);
}

2. 修复HTML重复ID #

移除第二个重复的id="estJobs"（保留类选择器即可）：

<p>*Now, lets do the math. <span class="highlight estJobs">3</span> customers times <span class="highlight " id="ppjTxt">$120</span> per job, that makes <span class="highlight roiTxt" id="roiTxt">$120</span> </p>

3. 确保计算逻辑的数值类型安全 #

如果jobs是字符串类型，需转换为数字避免计算异常：

let ROI =  _p * Number(jobs);

三、修复后效果 #

• input#jobs的值与所有.estJobs的span值完全一致
• roiTxt会正确显示estJobs × ppj的乘积结果（如3×120=$360）

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