只能在頁面上設置一個標籤的文字

我有一個很奇怪的問題。我有兩個可以輸入值的字段，然後我想在兩個單獨的標籤（不同的計算）中顯示計算值。只能在頁面上設置一個標籤的文字

但是，現在只顯示其中一個值。

HTML：

<input id="btcowned" /> 


<p> 
    Fee<br /> 
    <input id="feebox" value="4.5" /> 
</p> 

<p> 
    Transfer 
<label id="totalnetworth" style="font-weight: bold;" /> 
    (no vat)<br /> 
    <label id="totalnetworthVat" style="font-weight: bold;" /> 
    (vat)<br /> 
</p>

JAVASCRIPT：

<script> 
    $(document).ready(function() { 
     $('#btcowned').keyup(function() { 
      updateNumbers(); 
     }); 
     $('#feebox').keyup(function() { 
      updateNumbers(); 
     }); 


    }); 

    function updateNumbers() { 
     var chosen = $('#btcowned').val(); 
     var fee = parseFloat($('#feebox').val()); 

     var val = chosen - ((chosen * fee)/100); 
     var vatVal = val * (1 + 0.025); 

     $('#totalnetworth').text(val); 
     $('#totalnetworthVat').text(vatVal); 

     alert(vatVal); 

    } 
</script>

的totalnetworth的偉大工程，並顯示計算值。總的值不顯示任何內容。我也試過比寫vatVal更簡單的東西，比如$（'＃totalnetworthVat'）.text（'foo'）。

然而沒有顯示，並且FireBug顯示沒有JS錯誤。

我的alert（）顯示vatVal是一個實數。

任何想法？

來源

2013-06-02 Lars Holdgaard

我認爲這個問題是自閉合標籤：

<label id="totalnetworth" style="font-weight: bold;" />

如果將其更改爲：

<label id="totalnetworth" style="font-weight: bold;"></label>

...它然後似乎工作：http://jsfiddle.net/GRFda/

我理解是，除非文檔類型是xhtml，否則像你這樣的自閉標籤將無法工作，即使如此，如果頁面沒有以MIME類型text/xml或application/xhtml+xml。

來源

2013-06-02 10:26:46 nnnnnn

認真嗎？是的，工作......我認爲我們已經過去了那些討厭的問題。非常感謝！ :-) –

請注意，這僅適用於可以包含內容的元素。除非你使用的是xhtml，否則像''，''和'
'這樣的元素根本不需要關閉，但是如果你做了'
'，瀏覽器就不會抱怨。 – nnnnnn

我做了很多計算器，這就是爲什麼我給了它一點點工作。

看看我的解決方案jsFiddle。

<style type='text/css'> 
table td, 
table th { 
    border: 1px solid #DDD; 
    padding: 2px 5px; 
} 
.totalnetworth .value { 
    font-weight: bold; 
} 
</style> 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(document).ready(function() { 
    $('.btcowned').keyup(updateNumbers); 
    $('.feebox').keyup(updateNumbers); 
}); 
function updateNumbers(e) { 
// Preparation 
var $calc = $(this).closest('.calculator'), 
    $results = $calc.find('table'), 
    chosen = parseFloat($calc.find('.btcowned').val()), 
    fee = parseFloat($calc.find('.feebox').val()), 
    vatPercent = 25, 
// Calculation 
    vatRate = vatPercent * 0.01 + 1, 
    val = chosen - ((chosen * fee)/100), 
    vatVal = val * vatRate; 
// Representation 
$results.find('.totalnetworth .novat').html(isNaN(val) ? '-' : Number(val).toFixed(2)); 
$results.find('.totalnetworth .wvat').html(isNaN(vatVal) ? '-' : Number(vatVal).toFixed(2)); 
} 
});//]]> 
</script> 
<div class="calculator"> 
    <label for="btcowned-1">btcowned 
     <input id="btcowned-1" class="btcowned" value="" /> 
    </label> 
    <label for="btcowned-1">Fee 
     <input id="feebox-1" class="feebox" value="4.5" /> 
    </label> 
    <table> 
     <tr> 
      <th>Title</th> 
      <th>Cost</th> 
      <th>Cost+VAT</th> 
     </tr> 
     <tr class="totalnetworth"> 
      <td>Transfer</td> 
      <td class="novat value"></td> 
      <td class="wvat value"></td> 
     </tr> 
    </table> 
</div>

而且有些評論關於你的代碼：

不要使用ID對你的腳本;
只關閉無效標籤，如area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr;
不要信任用戶輸入以提供正確的數據格式，因爲它可能會使腳本輕鬆崩潰;
總是嘗試將準備和計算部分與腳本中的表示部分分開，這將使其更清潔，並且更容易捕獲錯誤。

來源

2013-06-02 11:03:26 Deele

只能在頁面上設置一個標籤的文字

回答

相關問題