Javascript 在jquery中更改输入时更新变量_Javascript_Jquery_Html_Var

Javascript 在jquery中更改输入时更新变量

javascript jquery html

Javascript 在jquery中更改输入时更新变量,javascript,jquery,html,var,Javascript,Jquery,Html,Var,我试图创建一个简单的px-to-em转换器，当其中一个输入字段发生变化时，它会自动计算值。我已经有了计算值的代码，但是当值被更改时它不会更新这是HTML <body> <h1>PX to EM converter</h1> <div id="base"> <h2>Enter a base pixel size</h2> <input id="baseSize" val

我试图创建一个简单的px-to-em转换器，当其中一个输入字段发生变化时，它会自动计算值。我已经有了计算值的代码，但是当值被更改时它不会更新

这是HTML

<body>
    <h1>PX to EM converter</h1>

    <div id="base">
        <h2>Enter a base pixel size</h2>
        <input id="baseSize" value="16">
        <p>px</p>
    </div>

    <div id="px">
        <input id="pxInput" value="16">
        <p>px</p>
        <div id="emOutput2"></div>
    </div>
    <p>em</p>

    <div id="Em">
        <input id="emInput" value="1">
        <p>em</p>
        <div id="pxOutput2">
        </div>
        <p>px</p>
    </div>
</body>

如果您能提供任何帮助，我们将不胜感激。

目前，您还没有听到输入框上的更改。jQuery的变更监听器非常简单

$('#baseSize').change(function() {
   // Code in here will run when the baseSize input is changed
   // Note that this must be inside your jQuery ready/onload function.
   // Note that this will **not** work with dynamically added elements
});

此外，在更新输入时，请使用jQuery的value函数，而不是访问属性

$('#baseSize').attr('value', baseSize2);
// Should be
$('#baseSize').val(baseSize2);

目前，您没有任何东西可以监听输入框上的更改。jQuery的变更监听器非常简单

$('#baseSize').change(function() {
   // Code in here will run when the baseSize input is changed
   // Note that this must be inside your jQuery ready/onload function.
   // Note that this will **not** work with dynamically added elements
});

此外，在更新输入时，请使用jQuery的value函数，而不是访问属性

$('#baseSize').attr('value', baseSize2);
// Should be
$('#baseSize').val(baseSize2);

我已经为您创建了一个JSFIDLE

我在keyup事件中设置了它：

$("#pxInput").keyup(function(){
         var emOutput = function (){ return $('#pxInput').val()/$('#baseSize').val();};
         $('#emOutput2').html(emOutput);
    });
    $("#emInput").keyup(function(){
         var pxOutput = function (){ return $('#emInput').val()/$('#baseSize').val();};
         $('#pxOutput2').html(pxOutput);
    });

我已经为您创建了一个JSFIDLE

我在keyup事件中设置了它：

$("#pxInput").keyup(function(){
         var emOutput = function (){ return $('#pxInput').val()/$('#baseSize').val();};
         $('#emOutput2').html(emOutput);
    });
    $("#emInput").keyup(function(){
         var pxOutput = function (){ return $('#emInput').val()/$('#baseSize').val();};
         $('#pxOutput2').html(pxOutput);
    });

该代码在页面加载时只运行一次，如果要根据用户输入进行更新，请添加事件处理程序。该代码在页面加载时只运行一次，如果要根据用户输入进行更新，请添加事件处理程序