Помогите с кодом JS
Я не понимаю почему код не работает , на видео он работает и я понимаю что возможно я допустил ошибку или не там поставил пробел , но я не понимаю где! Даже чат gpt мне непомог
Код
<main class="main">
<div class="container div_one">
<div class="div_one-inside">
<button class="button" onclick="console.log(`Сумма= ${summ = sum+1)}">Добавить товар</button>
<button class="button" onclick="console.log(`Сумма= ${summ = sum-1)}">Удалить товар</button>
<button class="button" onclick="console.log(`Сумма= ${summ = sum+2)}">Добавить два товара</button>
<div class="divbutton" onclick="console.log(`Сумма= ${summ = sum-2)}">Удалить два товара</div>
</div>
<a href="" class="number__products">
<div>
Количество товаров: <span class="summ">0</span>
</div>
</a>
</div>
</main>
<footer></footer>
<script src="script.js">let summ = 0;</script>
</body>
1. Скорее всего опечатка в переменных: использовались и sum, и summ, из-за чего всё ломалось.
2. Переменная summ объявлялась неправильно и не работала.
3. Значение счётчика обновлялось только в консоли, но не на странице.
4. Можно было получить отрицательное количество товаров.
5. Код повторялся в каждой кнопке.
<main class="main">
<div class="container div_one">
<div class="div_one-inside">
<button class="button" onclick="addProduct(1)">Добавить товар</button>
<button class="button" onclick="removeProduct(1)">Удалить товар</button>
<button class="button" onclick="addProduct(2)">Добавить два товара</button>
<div class="divbutton" onclick="removeProduct(2)">Удалить два товара</div>
</div>
<a href="#" class="number__products">
<div>
Количество товаров: <span id="summ">0</span>
</div>
</a>
</div>
</main>
<footer></footer>
<script>
let sum = 0;
function updateSum(value) {
sum += value;
if (sum < 0) sum = 0;
document.getElementById('summ').textContent = sum;
console.log(`Сумма = ${sum}`);
}
function addProduct(count) {
updateSum(count);
}
function removeProduct(count) {
updateSum(-count);
}
</script> Ты в блокноте что-ли код пишешь?
Тебе любой редактор кода скажет в чём твоя ошибка и подчеркнёт нужное место красным.
У тебя куча проблем:
Указан скрипт как внешний (script.js), но при этом пишешь код локально.
Почему-то поместил код в конец, от чего переменная summ ещё не объявлена внутри console.log.
Переменная sum не существует.
Отсутствует закрывающей кавычки внутри console.log.
Фигурная и круглая скобки поменены местами внутри console.log.
Создаёшь элемент с классом summ, но вместо него для вывода используешь console.log.
Зачем тебе переписывать код, функционал которого тебе не понятен? Каждая написанная строка должна быть со смыслом. Надо начинать с основ а не переписывать непонятный код с видео, ещё и с кучей ошибок.
Ошибка в атрибуте onclick: В атрибутах onclick у вас неправильно закрываются скобки в выражениях ${summ = sum+1)}, ${summ = sum-1)}, ${summ = sum+2)}, ${summ = sum-2)}. Скобка должна быть закрыта перед знаком доллара: ${summ = sum+1}), ${summ = sum-1}), ${summ = sum+2}), ${summ = sum-2}).
Неопределенная переменная sum: В вашем коде используется переменная sum, но она не определена нигде в вашем HTML или JavaScript.
Неправильное использование <script>: Вы объявляете переменную summ внутри тега <script>, который ссылается на внешний файл script.js. Это не будет работать, так как содержимое тега <script> не выполняется, если указан атрибут src.
Неправильное использование <a>: Элемент <a> используется без атрибута href, что может вызвать проблемы с доступностью и поведением в браузере.
Правильный код:
<title>Document</title>
<script>
let sum = 0;
function updateSum(value) {
sum += value;
document.querySelector('.summ').textContent = sum;
console.log(`Сумма= ${sum}`);
}
</script>
</head>
<body>
<main class="main">
<div class="container div_one">
<div class="div_one-inside">
<button class="button" onclick="updateSum(1)">Добавить товар</button>
<button class="button" onclick="updateSum(-1)">Удалить товар</button>
<button class="button" onclick="updateSum(2)">Добавить два товара</button>
<div class="divbutton" onclick="updateSum(-2)">Удалить два товара</div>
</div>
<a href="#" class="number__products">
<div>
Количество товаров: <span class="summ">0</span>
</div>
</a>
</div>
</main>
<footer></footer>
<script src="script.js"></script>
</body> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
let summ = 0;
</script>
<main class="main">
<div class="container div_one">
<div class="div_one-inside">
<button class="button" onclick="console.log(`Сумма= ${summ = summ + 1}`); document.querySelector('.summ').textContent = summ;">Добавить товар</button>
<button class="button" onclick="console.log(`Сумма= ${summ = summ - 1}`); document.querySelector('.summ').textContent = summ;">Удалить товар</button>
<button class="button" onclick="console.log(`Сумма= ${summ = summ + 2}`); document.querySelector('.summ').textContent = summ;">Добавить два товара</button>
<div class="divbutton" onclick="console.log(`Сумма= ${summ = summ - 2}`); document.querySelector('.summ').textContent = summ;">Удалить два товара</div>
</div>
<a href="" class="number__products">
<div>
Количество товаров: <span class="summ">0</span>
</div>
</a>
</div>
</main>
<footer></footer>
</body>
</html> Что за src="script.js"?
