私は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>
であなたの文
if (value === NaN) { ... }
を交換! - あなたは値'のようにそれを確認することができません===のNaN' – barbsanが重複する可能性を[文字が数字かどうか確認しますか?](http://stackoverflow.com/questions/8935632/check-if-character-is-number) –