Question

下面是一个基本的HTML布局，其中包含两个输入字段和一个带有'output'类的div。我想知道的是如何使用'output'类来更新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>

Answer 1

试试这个：

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

<强> Working Fiddle

Answer 2

您可以在javascript中使用 onkeyup 事件

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

Answer 3

此处为您的解决方案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);
    });
});

调整输入字段 - 将总值放在div中

3 个答案: