Question

我请求一些帮助，使用预定义变量在文本字段中使用整数输入的乘积更新结果元素内容。我想要实现的是id =“result”的元素的内容自动更新，我想用jquery实现这个：

以下是我的代码，提前谢谢。

<script>
    function updateresult(){
        var operand1 = parseFloat($('slide').val()) || 1;
	    var operand2 = 25;
	    var produt;
	    produt = operand1 * operand2;
	    $('#result').html(product);
    }
</script>

<!DOCTYPE HTML>
  <html>
    <head>  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>    
      <div id="text">
        Write to change:<input id="slide" type="text"  onchange="updateText()" />
      </div>
      <div >Total is: <span id="result"></span></div>
      <br/>
    </body>    
  </html>

Answer 1

您可以在jquery中使用textbox的keyup事件。

$("#slide").keyup(function(e){
     var operand1 = parseFloat($(this).val()) || 1;
    var operand2 = 25;
    var result = operand1 * operand2;
$("#result").html(result);
});

Working Sample

Answer 2

有几件事：

您的函数名为updateresult()，但您调用的函数不同：onchange="updateText()"
而不是$('slide')您需要使用ID选择器$（＆＃39;＃slide＆＃39;）
您在product中有拼写错误，有时将其称为poduct

以下代码修复了所有

＆＃13;

function updateText(){
    var operand1 = parseFloat($('#slide').val()) || 1;
	var operand2 = 25;
	var product;
	product = operand1 * operand2;
	$('#result').text(product);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
    Write to change:<input id="slide" type="text" onchange="updateText()">
</div>
<div >Total is: <span id="result"></span></div>

＆＃13;

还有一件事：change事件仅在元素失去焦点时才会被触发，您可能希望通过删除paste来添加keyup和onchange事件属性并将以下内容添加到您的javascript

$('#slide').on('change keyup paste',updateText);

还有一件事：你正在使用<!DOCTYPE HTML>所以这是html5。但是html5中没有自动关闭标记，因此您应该只编写<tag />而不是<tag>

在将整数输入与变量相乘后动态更新元素内容

2 个答案: