调整输入字段 - 将总值设置为div [英] adjusting input field - places total value in div
问题描述
下面是一个基本的HTML布局，它包含两个输入字段和一个带有'output'类的div。我想知道的是如何使div与输出类的更新与两个旋转的乘法改变。因此，当值被调整和更改时，答案会实时更新。
感谢您的帮助。我是新的整个javascript的东西，我假设这将需要。
< meta charset =utf -8/>
< / head>
< body>
< div class =pagewrap>
< form id =totalRenderTime>
< fieldset>
< div class =item>
< label>计数< / label>
< input type =numbermin =0max =99999999step =1value =100/>
< / div><！ - END item - >
< div class =item>
< label>乘数< / label>
< input type =numbermin =0max =99999999step =1value =10/>
< / div><！ - END item - >
< div class =item>
< label class =highlight>总渲染时间< / label>
< div class =output> 1000< / div>
< / div><！ - END item - >
< / fieldset>
< / form>
< / div><！ - END pagewrap - >
< / body>
在此处添加了解决方案 http://jsfiddle.net/8nhmU/16/
来源：
< div class =pagewrap ;
< form id =totalRenderTime>
< fieldset>
< div class =item>
< label> Count< / label>
< input id =txtfirsttype =numbermin =0max =99999999step =1value =100/>
< / div><！ - END item - >
< div class =item>
< label>乘数< / label>
< input id =txtSecondtype =numbermin =0max =99999999step =1value =10/>
< / div><！ - END item - >
< div class =item>
< label class =highlight>总渲染时间< / label>
< div class =output> 1000< / div>
< / div><！ - END item - >
< / fieldset>
< / form>
< / div><！ - END pagewrap - >
Javascript：
code> $（document）.ready（function（）{
$（＃txtfirst，#txtSecond）。change（function（）{
var result = $（＃txtfirst ）.val（）* $（＃txtSecond）。val（）;
$（。output）text（result）;
}）;
Below is a basic HTML layout that contains two input fields and one div with the class of 'output'. What I want to know is how to make the div with the class of 'output' be updated with the multiplication of the two spinners upon change. So as the values are adjusted and changed the answer is updated in real time.
Thank you guys for the help. I'm new to the whole javascript thing which I'm assuming this will require.
<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>
Added Fiddle here for your solution http://jsfiddle.net/8nhmU/16/
Source:
<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);
});
});
这篇关于调整输入字段 - 将总值设置为div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
