Выдает NaN вместо числа

Question

Программа должна при нажатии кнопки брать число, прибавлять к нему единицу и выводить результат. Но выводит NaN. Помогите решить!

Код HTML:

<span id="num">0</span>
<button onclick="plus()">Добавить в корзину</button>

Код JS:

function plus() {
    let num, result
    num = document.getElementById('num')
    num = parseInt(num)
    result = 'num' + 1
    document.getElementById('num').innerHTML = result
}

Answer 1

function plus() {
    let num = document.getElementById('num');
    num.innerText ++;
}

<span id="num">0</span>
<button onclick="plus()">Добавить в корзину</button>

Answer 2

<span id="num">0</span>
<button onclick="plus()">Добавить в корзину</button>

<script>
function plus() {
    let num, result;
    num = document.getElementById('num').innerHTML;
    num = parseInt(num);
    result = num + 1;
    document.getElementById('num').innerHTML = result;
}

</script>

Answer 3

num = document.getElementById('num')

Здесь в переменную num присваивается ссылка на объект HTML-элемента с id="num". Вы пытаетесь превратить объект в число, оттуда выходит NaN. Если нужна строка, написанная внутри элемента, нужно взять непосредственно её, через свойство textContent

result = 'num' + 1 ?! Всё, что пишется в кавычках - это строка. Оно не имеет никакого отношения к переменной num. А в переменную result присваивается строка 'num1'

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  let elem = document.getElementById("num");
  let num = parseInt( elem.textContent );
  
  elem.textContent = num + 1;
});

<span id="num">0</span>
<button id="btn">Добавить в корзину</button>

Вся подобная элементарщина хорошо описана тут → http://learn.javascript.ru/

P.s. В идеале, HTML нужно использовать только для отображения данных, а не хранения. Хранить такие числа следует в переменных / массивах / объектах.

Answer 4

Обернул ваш код в еще 1 блок родителя, для удобства навигации внутри, сейчас 1 кодом сможете проставлять в любом материале нужное количество.

let el = document.querySelectorAll('.basket button');
if (el.length > 0) {
   for (let btn of el) {
        btn.onclick = function (e) {
              let i = e.target.previousElementSibling;
              i.innerText = parseInt(i.innerText)+1;
        }
   }
}

<div class="basket">
  <span>0</span>
  <button>Добавить в корзину</button>
</div>

БЛОГ НА HUSL

Выдает NaN вместо числа

Ответы (4 шт):