nan в результате действия

242

04 мая 2017, 14:21

var summ; 
function selectItem(id) { 
  summ += Number($('#item-' + id).attr('data-price')); 
  $('#summ').text(summ); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="block1"> 
  <div class="item-1" onclick="selectItem(1);" data-price="10" >selectItem(1)</div> 
  <div class="item-2" onclick="selectItem(2);" data-price="20" >selectItem(2)</div> 
</div> 
<br> 
summ: <div id="summ"></div>

Код должен считать сумму по атрибуту data-price, но почему-то отдает NaN

Answer 1

задайте начальное значение для summ
ищите класс .item-, а не идентификатор #item-

var summ = 0; 
function selectItem(id) { 
  summ += Number( $('.item-' + id).data('price') ); 
  $('#summ').text(summ); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="block1"> 
  <div class="item-1" onclick="selectItem(1);" data-price="10" >selectItem(1)</div> 
  <div class="item-2" onclick="selectItem(2);" data-price="20" >selectItem(2)</div> 
</div> 
<br> 
summ: <div id="summ"></div>

Answer 2

В данном случае не инициализирована переменная summ. Ее значение по умолчанию - undefined.

Результат сложения undefined с любым числом даст NaN.

Как верно заметил @GlebKemarsky разметке присутствуют элементы с классом, а в функции ищутся элементы с id. Из-за этого,