Проблема с Thymeleaf: невозможно получить правильные значения идентификатора ⇐ JAVA

[Anonymous]

Проблема возникает при попытке передать динамический идентификатор товара из HTML в функцию JavaScript. Вместо ожидаемого числового значения товарный идентификатор рассматривается как строковый литерал (например, ${row.goodsId}) и не обрабатывается правильно в обработчике событий oninput. Это приводит к ошибкам при попытке доступа к связанным элементам в функции Calc, что приводит к появлению нулевых ссылок и сбою сценария. Задача заключается в том, чтобы гарантировать, что правильное значение анализируется и передается в функцию JavaScript во время выполнения.
html

Код: Выделить всё

Функция JavaScript

Код: Выделить всё

function calc(goodsId, quantity) {
console.log("Calculating subtotal for goodsId: " + goodsId + " with quantity: " + quantity.value);
var priceElement = document.getElementById("price_" + goodsId);

if (priceElement) {
var price = parseFloat(priceElement.textContent) || 0;
var qtyValue = parseInt(quantity.value) || 0;
var subtotal = price * qtyValue;

var subtotalElement = document.getElementById("subtotal_" + goodsId);
if (subtotalElement) {
subtotalElement.textContent = subtotal.toFixed(2);
} else {
console.error("Subtotal element not found for goodsId: " + goodsId);
}
}

Справочник ошибок

Код: Выделить всё

Subtotal for goodsId: ${row.goodsId} = 6798

Контроллер успешно добавляет сообщения в корзину и может вернуть текущую корзину в сеансе:

Код: Выделить всё

AddGoodsRequest(goodsId=1, goodsName=Dell Achievement 3470 High-Performance Business Desktop Computer, goodsPrice=3399.0, quantity=1),
AddGoodsRequest(goodsId=4, goodsName=Dell Vostro 3668-R2938, goodsPrice=6699.0, quantity=1)

HTML-структура

Код: Выделить всё

function calc(goodsId, quantity) {
console.log("Calculating subtotal for goodsId: " + goodsId + " with quantity: " + quantity.value);
var priceElement = document.getElementById("price_" + goodsId);
console.log("Price for goodsId: " + goodsId + " = " + priceElement.textContent);
if (priceElement) {
var price = parseFloat(priceElement.textContent) || 0;
var qtyValue = parseInt(quantity.value) || 0;
var subtotal = price * qtyValue;

var subtotalElement = document.getElementById("subtotal_" + goodsId);
if (subtotalElement) {
subtotalElement.textContent = subtotal.toFixed(2);
} else {
console.error("Subtotal element not found for goodsId: " + goodsId);
}
console.log("Subtotal for goodsId: " + goodsId + " = " + subtotal);

var total = 0;
var subtotalElements = document.querySelectorAll("[id^='subtotal_']");
subtotalElements.forEach(function (subtotalElement) {
total += parseFloat(subtotalElement.textContent) || 0;
});

document.getElementById("total").textContent = total.toFixed(2);
}
}

window.onload = function () {

};





商品名稱
數量
單價
小計






123





$


$


 


合計：$0.00





  

Текущее поведение

• Промежуточный итог обновляется только для первого элемента при изменении количества.
• Идентификаторы элементов не могут быть правильно получены с помощью функции JavaScript.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -id-values