Итак, недавно, когда я писал код, я столкнулся с интересной проблемой, которая меня поразила. На изображении ниже показан фрагмент кода, который я буду обсуждать сегодня.

function handleSubmit(e) {
    e.preventDefault();
    let totalVotes = document.querySelector('#vote-count').textContent

    parseTot = parseInt(totalVotes)
    parseTarg = parseInt(e.target.votes.value)
    totalVotes = parseTot + parseTarg

    document.querySelector('#vote-count').textContent = totalVotes

    currentCharacter.votes = totalVotes

    patchCurrentCharacter(currentCharacter)
}

Часть кода, которую я хотел бы обсудить, — это первые 6 строк моей функции «handleSubmit». Во второй строке я создаю переменную с именем totalVotes, которой затем присваиваю значение document.querySelector(‘#vote-count’).textContent. Так почему же я должен повторять именно это в шестой строке? Почему 5-я строка не охватывает то, что должно быть указано в 6-й строке, и даже тогда, почему 6-я строка не может выполняться как totalVotes = totalVotes?

Вот где появляется заголовок моего поста. Во второй строке все, что я делаю, это присваиваю моей переменной totalVotes буквальное текстовое содержимое в этом месте, которое может быть чем угодно. Если я здесь console.log(totalVotes), я получу текстовое содержимое, но не document.querySelector(‘#vote-count’).textContent. Это означает, что я не могу изменить текстовое содержимое html-элементов с помощью моей переменной totalVotes, потому что она не обязательно связана с этим элементом, а только назначается текстовому содержимому этого элемента.

Мне, как новичку в программировании, было трудно уловить это в коде, и почти так же сложно было понять, пока кто-то объяснял это мне. Тем не менее, я чувствую, что в этом конкретном случае требуется своего рода момент озарения: момент, когда вы сначала не понимаете, но как только вы это понимаете, все обретает смысл.

Надеюсь, я смог помочь вам приблизиться к моменту Эврики, если вы тоже боретесь с этой концепцией!