<span id="sample">0</span> 到新的输入框

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

//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>*****************************************************************

Answer 2

不确定我是否理解正确，但我认为您想要这些方面的东西？

我猜你想要

• 第一个字段只读

• 第二个字段作为滑块

• 在提交时计算总数，您可以在其中将结果发布到另一个 div 中。在您的情况下是模式。

---

把结果放在你喜欢的地方

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

<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>