计算结果未显示在 <h2>中。Jquery/Javascript

Question

我有一个正在运行的百分比计算器。然而，结果只显示在我的input中。它没有显示在我的h2中。我希望结果同时显示在input和h2中。这可能吗？

$(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%
$(formContainer).find('.CalcResult').val(Number(multiply).toFixed(2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="section">
<p style="margin:5px 0 5px;color:blue;font-size:18px;">Topper to current</p>
<input type="text" class="ChangeCalulator CalcFrom" value="1000">
<input type="text" class="CalcTo ChangeCalulator" value="">
<input type="text" class="CalcResult" value="">
<h2 class="CalcResult"></h2>
</div>

Answer 1

问题是因为您使用的是val()，而只有input元素有值。要在h2中显示输出，请使用text()方法。

此外，我建议分离选择器，否则您的代码将尝试向h2添加value，向input添加文本节点，这是无效的。

最后，使用input事件而不是绑定到的多个事件，并且不要双重包装jQuery对象，这是一种浪费。

$(document).on("input", ".ChangeCalulator", (e) => {
let $formContainer = $(e.target).closest('.section')
let first = Number($formContainer.find('.CalcFrom').val());
let second = Number($formContainer.find('.CalcTo').val());
let result = ((second - first) / first * 100).toFixed(2);

$formContainer.find('input.CalcResult').val(result);
$formContainer.find('h2.CalcResult').text(result);
});

.section p {
margin: 5px 0 5px;
color: blue;
font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="section">
<p>Topper to current</p>
<input type="text" class="CalcFrom ChangeCalulator" value="1000">
<input type="text" class="CalcTo ChangeCalulator" value="">
<input type="text" class="CalcResult" value="">
<h2 class="CalcResult"></h2>
</div>

Answer 2

$('.section .ChangeCalulator').on('keyup',function(){
var result = ((parseFloat($('.CalcTo').val()) - parseFloat($('.CalcFrom').val())) / parseFloat($('.CalcFrom').val()) * 100).toFixed(2);
if(isNaN(result)) 
{
result='';
}
$('.CalcResult').val(result);
$('.CalcResult').text(result);
});

.section p {
margin: 5px 0 5px;
color: blue;
font-size: 18px;
}

<-- The issue is because you are  using val(), and only input elements have values. To show the output in the h2 use the text() method. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="section">
<p>Topper to current</p>
<input type="text" class="CalcFrom ChangeCalulator" value="1000">
<input type="text" class="CalcTo ChangeCalulator" value="">
<input type="text" class="CalcResult" value="">
<h2 class="CalcResult"></h2>
</div>