jQuery/JavaScript百分比计算器：结果无法显示在<h2>，需同时显示于input

当然可行，问题出在你对所有.CalcResult元素统一使用了.val()方法——这个方法仅适用于表单元素（如input），而<h2>标签没有value属性，所以无法被赋值。只需针对不同元素类型使用对应的赋值方法即可。

修改后的JavaScript代码 #

$(document).on("change keyup blur live", ".ChangeCalulator", function() { // For:- = Topper To Current %
  let formContainer = $(this).closest('.section')
  var first = Number($(formContainer).find('.CalcFrom').val()); // = Topper Price
  var second = Number($(formContainer).find('.CalcTo').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  const result = Number(multiply).toFixed(2);
  
  // 给input输入框设置结果
  formContainer.find('input.CalcResult').val(result);
  // 给h2标签设置结果文本
  formContainer.find('h2.CalcResult').text(result);
});

代码说明 #

1. 先计算出格式化后的结果result，避免重复计算
2. 用input.CalcResult精准定位输入框，调用.val()赋值
3. 用h2.CalcResult定位标题标签，调用.text()设置文本内容

这样修改后，计算结果就能同时显示在input输入框和h2标签里了。

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