Почему скрипт работает только для одного элемента?
В каждой строке таблицы выводится новый товар и соответственно input для выбора количества товаров.
Написан скрипт для получения цены с учётом количества товаров, но работает он только для первой строки таблицы:(
id не использую, тогда почему так???
$sql = "SELECT id, name, category, price, opisanie, file FROM goods"; $result = mysqli_query($link, $sql); while($row = mysqli_fetch_assoc($result)){ $itog = $itog + $row['price']; echo ' <tr> <td><img src="../img/'.$row['file'].'" class="group1" style="width: 100px;"/> </td> <td><span class="textkor">'.$row['name'].'</span></td> <td><span class="textkor" ><span class="priceValue">'.$row['price'].'</span>₽</span></td> <td><button class="button-minus">-</button> <input onChange="change()" type="number" value="1" class="totalItems" min="1" max="200"> <button class="button-plus">+</button></td> </tr> <script> //цена товара let itemPrice = '.$row['price'].'; let priceValue = document.querySelector(".priceValue"); let plusBtn = document.querySelector(".button-plus"); let minusBtn = document.querySelector(".button-minus"); let totalItems = document.querySelector(".totalItems"); //Обработчик нажатия на плюс plusBtn.addEventListener("click", () =>{ totalItems.value++ && change(); }); //Обработчик нажатия на минус minusBtn.addEventListener("click", () => { totalItems.value-- && change(); }); // изменение .priceValue при изменении в input const change = () => { totalItems.value < 1 && (totalItems.value = 1); priceValue.textContent = itemPrice * totalItems.value; } </script> '; } |
$sql = "SELECT id, name, category, price, opisanie, file FROM goods"; $result = mysqli_query($link, $sql); while($row = mysqli_fetch_assoc($result)){ $itog = $itog + $row['price']; echo ' <tr> <td><img src="../img/'.$row['file'].'" class="group1" style="width: 100px;"/> </td> <td><span class="textkor">'.$row['name'].'</span></td> <td><span class="textkor" ><span class="priceValue">'.$row['price'].'</span>₽</span></td> <td><button class="button-minus">-</button> <input onChange="change()" type="number" value="1" class="totalItems" min="1" max="200"> <button class="button-plus">+</button></td> </tr> <script> //цена товара let itemPrice = '.$row['price'].'; let priceValue = document.querySelector(".priceValue"); let plusBtn = document.querySelector(".button-plus"); let minusBtn = document.querySelector(".button-minus"); let totalItems = document.querySelector(".totalItems"); //Обработчик нажатия на плюс plusBtn.addEventListener("click", () =>{ totalItems.value++ && change(); }); //Обработчик нажатия на минус minusBtn.addEventListener("click", () => { totalItems.value-- && change(); }); // изменение .priceValue при изменении в input const change = () => { totalItems.value < 1 && (totalItems.value = 1); priceValue.textContent = itemPrice * totalItems.value; } </script> '; }
Дополнительно:
Сделайте нормально. Скрипт отдельно, html отдельно.
Скрипт общий для всех строк. Не надо вот эту лабуду в цикле выводить.
Ответы:
Получается у тебя на каждый элемент свой тэг скрипт.. Очень не оптимально.
Проблема твоя пофикситься если js код обернуть в замыкание. (function() {твой код тут})();
Но правильней всего будет использовать отдельный скрипт который слушает пассивно общий клик на документ по селектору, и уже например через closest() или дата атрибуты изменять счетчик.
Может стоит как раз использовать id? Если генерируете js для каждого элемента, то почему бы не задавать кнопке id="btn_plus_'.$row['id'].'"
- Нет, это не решает проблему:(
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда скрипт работает только для одного элемента, может возникать по нескольким причинам. Возможно, ваш скрипт использует id для выбора элемента, а не класс, и поэтому применяется только к первому элементу с таким id.
Для того чтобы скрипт работал для всех элементов, вам следует использовать классы вместо id. Например, если у вас есть несколько элементов, которые должны выполнять одну и ту же функцию, добавьте им один и тот же класс, и затем выбирайте элементы по этому классу.
Пример кода на JavaScript:
document.querySelectorAll('.your-class').forEach(element => { // Ваш код здесь });
Если вы используете jQuery, то можно сделать так:
$('.your-class').each(function() { // Ваш код здесь });
Если вы хотите, чтобы скрипт работал для всех элементов с определенным id, то вам нужно изменить ваш код так, чтобы он выбирал все элементы с таким id и применял к ним нужные действия.
Также, убедитесь, что ваш скрипт правильно выбирает все нужные элементы и что он корректно обрабатывает их. Проверьте консоль браузера на наличие ошибок, возможно, что проблема кроется в другом месте вашего кода.
Надеюсь, это поможет вам разобраться с проблемой и сделать ваш скрипт работающим для всех элементов, а не только для одного.