調整輸入字段 - 將總值放在div中

下面是一個基本的HTML佈局，其中包含兩個輸入字段和一個具有「輸出」類的div。我想知道的是如何通過改變兩個spinners的乘積來更新'output'類的div。所以隨着數值的調整和改變，答案會實時更新。調整輸入字段 - 將總值放在div中

謝謝你們的幫助。我是新來的整個JavaScript的東西，我假設這將需要。

<meta charset="utf-8" /> 

</head> 


<body> 

    <div class="pagewrap"> 

     <form id="totalRenderTime"> 

      <fieldset> 

       <div class="item"> 
        <label>Count</label> 
        <input type="number" min="0" max="99999999" step="1" value="100" /> 
       </div><!--END item --> 

       <div class="item"> 
        <label>Multiplier</label> 
        <input type="number" min="0" max="99999999" step="1" value="10" /> 
       </div><!--END item --> 

       <div class="item"> 
        <label class="highlight">Total Render Time</label> 
        <div class="output">1000</div> 
       </div><!--END item --> 

      </fieldset> 
     </form> 

    </div><!--END pagewrap --> 

</body>

來源

2014-01-14 JokerMartini

新增搗鼓您的解決方案http://jsfiddle.net/8nhmU/16/

來源：

<div class="pagewrap"> 

     <form id="totalRenderTime"> 

      <fieldset> 

       <div class="item"> 
        <label>Count</label> 
        <input id="txtfirst" type="number" min="0" max="99999999" step="1" value="100" /> 
       </div><!--END item --> 

       <div class="item"> 
        <label>Multiplier</label> 
        <input id="txtSecond" type="number" min="0" max="99999999" step="1" value="10" /> 
       </div><!--END item --> 

       <div class="item"> 
        <label class="highlight">Total Render Time</label> 
        <div class="output">1000</div> 
       </div><!--END item --> 

      </fieldset> 
     </form> 

    </div><!--END pagewrap -->

的Javascript：

$(document).ready(function() { 
    $("#txtfirst, #txtSecond").change(function(){ 
    var result=$("#txtfirst").val()* $("#txtSecond").val(); 
    $(".output").text(result); 
    }); 
});

來源

2014-01-14 08:18:07

試試這個：這裏

$("input").change(function() { 
var mul=1; 
$('input').each(function(){ 
mul=mul*parseInt($(this).val()); 
}) 
$('.output').html(mul); 
});

Working Fiddle

來源

2014-01-14 08:17:29

您可以使用的onkeyup事件在JavaScript

<script> 
function showTotal() 
{ 
document.getElementById("output").innerHTML=parseInt(document.getElementById("count").value)*parseInt(document.getElementById("multipy").value); 

} 
</script> 
</head> 
<body> 
<div class="pagewrap"> 
<form id="totalRenderTime"> 
<fieldset> 
<div class="item"> 
<label>Count</label> 
<input type="number" id="count" min="0" max="99999999" step="1" value="100" onkeyup="showTotal();" /> 
</div><!--END item --> 
<div class="item"> 
<label>Multiplier</label> 
<input id="multipy" type="number" min="0" max="99999999" step="1" value="10" onkeyup="showTotal();" /> 
</div><!--END item --> 
<div class="item"> 
<label class="highlight">Total Render Time</label> 
<div class="output" id="output">1000</div> 
</div><!--END item --> 
</fieldset> 
</form> 
</div> 

</body>

來源

2014-01-14 08:20:35 Shn

調整輸入字段 - 將總值放在div中

回答

相關問題