У меня есть приложение, в котором пользователи могут добавлять товары в свою корзину.Их корзина сохраняется в Spring Data JPA и сохраняется в БД MySQL.В любом случае, я бы хотел, чтобы текст «Добавить в корзину» был изменен на «Удалить», а затем, наоборот, при повторном нажатии кнопки.
Я пробовал разные методы, такие как использование обычного JS ипытаясь изменить innerHTML, а также некоторые методы JQuery, которые я нашел здесь, но я не могу заставить его измениться.Код, который в настоящее время находится внутри скрипта в моем файле index.html, является лишь одним примером кода, который я пробовал.
Кроме того, для ясности, добавление в корзину работает.Это просто не меняется при нажатии.
Спасибо за поиск.
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/main_layout}">
<head th:replace="fragments :: head"></head>
<body>
<nav th:replace="fragments :: navigation"></nav>
<h1 th:text="${title}" class="display-5">Add Cheeses</h1>
<p th:unless = "${cheeses} and ${cheeses.size()}">No Items</p>
<table class="table">
<tr>
<th>Name</th>
<th>Description</th>
<th>Category</th>
<th>Price</th>
<th></th>
</tr>
<tr th:each ="cheese : ${cheeses}">
<td th:text ="${cheese.name}"></td>
<td th:text ="${cheese.description}"></td>
<td th:text="${cheese.type}"></td>
<td th:text ="${cheese.price}"></td>
<td>
<form method="post">
<button type="submit" id="changeBtn" onclick="myFunction()" class="btn btn-success btn-sm" name = "cheeseId" th:value="${cheese.id}" th:id="${cheese.id}">Add to Cart</button>
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myFunction() {
if (document.getElementById("changeBtn").innerHTML == "Add to Cart") {
document.getElementById("changeBtn").innerHTML = "Remove";
}
else document.getElementById("changeBtn").innerHTML = "Add to Cart";
}
</script>
</body>
</html>
фрагментов.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:fragment="head">
<meta charset="UTF-8"/>
<title th:text = "${title}"></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/materia/bootstrap.min.css">
<script th:src="@{webjars/jquery/jquery.min.js}"></script>
<script th:src="@{webjars/jquery/bootstrap.min.js}"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" th:fragment="navigation">
<a class="navbar-brand" href="#">Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese">List</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/add">Add</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/remove">Remove</a>
</li>
<li class="navbar-right" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/account">Account</a>
</li>
<li class="navbar-right" sec:authorize="!isAuthenticated()">
<a class="nav-link" href="/cheese/login">Login</a>
</li>
<li class="navbar-right" sec:authorize="!isAuthenticated()">
<a class="nav-link" href="/cheese/signup">Signup</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" th:action="@{/logout}" method="post" sec:authorize="isAuthenticated()">
<input class="form-control mr-sm-2" type="hidden" />
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Logout</button>
</form>
</div>
</nav>
<body>
</body>
</html>