簡體   English   中英

NaN的Javascript問題

[英]Javascript problems with NaN

我是js的初學者,當您修改數量並計算列總數時,有人幫助我制作了一個js代碼來計算列。 這段代碼可以正常工作,但不適用於兩件事。 當字段是諸如“ nc”之類的文本(html示例的第26行,也可以是其他文本)時,我得到結果NaN,但是我需要在字段中顯示該文本 ,並且默認值是十進制數字時(例如html示例的0,9第20行)。 如何修改代碼以解決這兩個選項?

 (function() { let table = document.querySelector('#nutrition') let tBodyElems = table.querySelector('tbody') let trElems = [...tBodyElems.querySelectorAll('tr')].map(tr => { let td = [...tr.querySelectorAll('td')] td.input = tr.querySelector('input') td.tr = tr return td }) let tFoot = table.querySelector('tfoot') let tFootTd = [...tFoot.querySelectorAll('td')] const updateTotal = function() { tFootTd.forEach((tdFoot, i) => { if (i === 0) { return } if (i === 1) { let total = trElems.reduce((a, e) => { return a + (parseInt(e.input.value)) }, 0) tdFoot.textContent = total } else { let total = trElems.reduce((a, e) => { return a + (parseFloat(e[i].dataset.curValue) || parseFloat(e.input)) }, 0) tdFoot.textContent = Math.ceil(total * 1000) / 1000 } }) } const updateRow = function(trElement) { let value = parseFloat(trElement.input.value.replace(',', '.')) if (value === NaN) { return } [...trElement].splice(2).forEach(e => { let newValue = Math.ceil(parseFloat(e.dataset.for100) * value) / 100 e.textContent = newValue e.dataset.curValue = newValue }) } const updateAll = function() { trElems.forEach(updateRow) updateTotal() } const debounce = function(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; window.addEventListener('DOMContentLoaded', updateAll) trElems.forEach(tr => { tr.input.addEventListener('keydown', debounce(() => { updateRow(tr), updateTotal() }, 250)) }) })() 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="container"> <div class="row col-md-offset-2 col-md-14"> <table class="table table-striped" id="nutrition"> <thead> <tr> <th>Aliments</th> <th>Poids (Gr)</th> <th>Energie kJ</th> <th>Energie kcal</th> <th>Proteines</th> </thead> <tbody class="text-primary"> <tr> <td>Pain grillé, domestique:</td> <td><input type="text" value="20gr"></td> <td data-for100="1430">1430</td> <td data-for100="336">336</td> <td data-for100="0,9">0,9</td> </tr> <tr> <td>Cabillaud, cuit à la vapeur:</td> <td><input type="text" value="40gr"></td> <td data-for100="350">350</td> <td data-for100="nc">nc</td> <td data-for100="18.6">18,6</td> </tr> </tbody> <tfoot> <td>Total</td> <td><strong>60gr</strong></td> <td data-for100="350">350</td> <td data-for100="82.7">82,7</td> <td data-for100="18.6">18,6</td> </tfoot> </table> </div> </div> </div> 

將語句if (value === NaN) { ... }替換為if (isNaN(value)) { ... }

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM