2017-05-18 10 views
0

私はjsの初心者です。数量を変更して列の合計を計算するときに列を計算するためのjsコードを作成するのに役立ちました。このコードはうまく動作しますが、2つのものではありません。フィールドが "nc"(html exempleの26行目、それは他のテキストでもよい)のようなテキストである場合、結果NaNを得るが、フィールドに表示されるテキストはであり、デフォルト値がa 10進数(html exempleの0,9行20のように)。これら2つのオプションを解決するためにコードを変更するにはどうすればよいですか?NaNのJavascriptの問題

(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>

+0

であなたの文if (value === NaN) { ... }を交換! - あなたは値'のようにそれを確認することができません===のNaN' – barbsan

+0

が重複する可能性を[文字が数字かどうか確認しますか?](http://stackoverflow.com/questions/8935632/check-if-character-is-number) –

答えて

0

JS `はNaN == NaN`でif (isNaN(value)) { ... }

+0

ありがとうございますが、常に同じ結果が得られます... – ginette

+0

'if === NaN){ return trElement; } ' – Sventies

+0

同じ...うまくいきません – ginette