當在jquery中輸入更改時更新變量

我試圖創建一個簡單的px到em轉換器，當其中一個輸入字段發生更改時，它會自動計算值。我已經有了計算值的代碼，但是當值更改時它不會更新。當在jquery中輸入更改時更新變量

繼承人的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>

而且JS

$(document).ready(function() { 
    var baseSize2 = $('#baseSize').val(); 
    var pxInput = $('#pxInput').val(); 
    var emInput = $('#emInput').val(); 
    var emOutput = function() { 
     return pxInput/baseSize2; 
    }; 
    var pxOutput = function() { 
     return emInput * baseSize2; 
    }; 

    $('#baseSize').attr('value', baseSize2); 
    $('#pxInput').attr('value', pxInput); 
    $('#emInput').attr('value', emInput); 
    $('#pxOutput2').html(pxOutput); 
    $('#emOutput2').html(emOutput); 
});

任何幫助將非常感激

來源

2015-03-02 user3806523

該代碼將只在頁面加載時運行一次，添加事件處理程序，如果你想根據用戶輸入更新 – charlietfl 2015-03-02 21:44:00

此刻，你已經沒有什麼可監聽輸入變化框。 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的值函數而不是訪問屬性。

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

來源

2015-03-02 21:42:49 Matt

我爲您創建了一個JSFiddle here。

我已經將它設置在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); 
    });

來源

2015-03-02 21:45:25

大，非常感謝偉大回答！ – user3806523 2015-03-02 22:18:08

當在jquery中輸入更改時更新變量

回答

相關問題