Question

我最近得到的calculatesum JavaScript模式显示为<span id="sample">0</span>（该值会根据用户输入的数字键增加）

如何在模态外的另一个输入框中显示此最终样本值？帮助

JavaScript如下：

$(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function() {

        $(this).keyup(function(){
            calculateSum();
        });
    });

});

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(0));
}

HTML或rangeslide代码如下：

<input type="text" class="form-control slider-text-field" id="homeContentInput" placeholder="250,000">
                </td><td>&nbsp;&nbsp;(RM)</td></tr></table>
                <br/>
                <input type="range" value="250000" min="15000" max="500000" step="10000" id="homeContentRange">
                <span class="slider-label-min">RM 15,000</span> <span class="slider-label-max">RM 500,000</span>

基本上，我需要将placeholder="250,000"替换为第一个输入框，将value="250000"替换为<span id="sample">0</span>的最终值。

Answer 1

我不确定我是否理解这一点，但我认为你想要这些内容？

我假设你想要

第一个字段只读
第二个字段作为滑块
计算总数，您可以在其中将结果发布到另一个div中。在您的情况下为模态。

将结果放在任何您喜欢的地方

<p id="result"> </p>

＆＃13;

<input id="value1" type="text" value="250000" readonly="readonly"/>
<span> + </span>
<input id="value2" type="text" id="textInput" value="15000">
                <span class="slider-label-min">RM 15,000</span> <span class="slider-label-max">RM 500,000</span>
<input type="submit" onclick="output();">
<p id="result"> </p>
<input type="range" type="range" value="250000" min="15000" max="500000" step="10000" onchange="updateTextInput(this.value);">



<script type="text/javascript" language="javascript" charset="utf-8">

function output(){
    var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
    document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}

function updateTextInput(val) {
          document.getElementById('value2').value=val; 
        }

</script>

＆＃13;

Answer 2

//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {

  $(this).keyup(function() {
    calculateSum();

  });
});


function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });

  //.toFixed() method will roundoff the final sum to 2 decimal places
  //$("#sum").html(sum.toFixed(0));
  $("#homeContentInput").val(sum.toFixed(0));
  $("#homeContentRange").val(sum.toFixed(0));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
*****************************************************************
<br>if you just want to add up the values then this will work, else you need to be more clear with your question.
<br>form2-1:
<input class="txt" type="text" id="form2-1" value="0">
<br>form2-2:
<input class="txt" type="text" id="form2-2" value="0">
<br>form2-3:
<input class="txt" type="text" id="form2-3" value="0">

<br>Not sure what you want to do bellow this... *****************************************************************
<br>

<input type="text" class="form-control slider-text-field" id="homeContentInput" placeholder="250,000">(RM)
<br>

<input type="range" value="250000" min="15000" max="500000" step="10000" id="homeContentRange">
<br>
<span class="slider-label-min">RM 15,000</span>  <span class="slider-label-max ">RM 500,000</span>
<br>*****************************************************************

<span id =“sample”> 0 </span>到新输入框

2 个答案: