Вот мой JS, просто увеличивается input="text" при нажатии на + и уменьшает при нажатии на -.
unction stepperDecrement(btn){
const inputEl = btn.nextElementSibling;
const calcStep =inputEl.step * -1;
const newValue = parseInt(inputEl.value) + calcStep;
if(newValue >= inputEl.min && newValue <= inputEl.max){
inputEl.value = newValue;
}
}
function stepperIncrement(btn){
const inputEl = btn.previousElementSibling;
const calcStep = inputEl.step * 1;
const newValue = parseInt(inputEl.value) + calcStep;
if(newValue >= inputEl.min && newValue <= inputEl.max){
inputEl.value = newValue;
}
}
Вот мой HTML до добавления th:field на элементе input ( для краткости показана только часть, относящаяся к вопросу )
<div class="single-menu" th:each="dish : ${dishList}">
<form action="#" th:action="@{/menu}" th:object="${order}" method="post">
<button class="decrement" onclick="stepperDecrement(this)">-</button>
<input
type="number"
min="0"
max="100"
step="1"
value="0"
readonly/>
<button class="increment" onclick="stepperIncrement(this)">+</button>
<button type="submit" value="Submit" class="btn btn-outline-light mt-3 btn-lg">Confirm order</button>
</form>
</div>
Теперь я добавлю th:field, который просто кладет в key dishId, а в value - inputValue.
<div class="single-menu" th:each="dish : ${dishList}">
<form action="#" th:action="@{/menu}" th:object="${order}" method="post">
<button class="decrement" type="button" onclick="stepperDecrement(this)">-</button>
<input
th:field="*{dishQuantityMap[__${dish.id}__]}"
type="number"
min="0"
max="100"
step="1"
value="0"
readonly/>
<button class="increment" type="button" onclick="stepperIncrement(this)">+</button>
<button type="submit" value="Submit" class="btn btn-outline-light mt-3 btn-lg">Confirm order</button>
</form>
</div>
И у меня перестает работать мой JS
Кнопки не нажимаются, value даже не показывается.
Буду очень благодарен за помощь в понимании и исправлении проблемы.
CSS мало относится к вопросу, но решил добавить
/* Button */
.myContainer {
width: 100px;
top: 50%;
left: 50%;
display: flex;
border-radius: 45px;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}
input[type="number"] {
-moz-appearance: textfield;
text-align: center;
font-size: 20px;
border: none;
background-color: #e0e0e0;
color: #302020;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
button {
color: #ff7720;
background-color: #d3d2d2;
border: none;
font-size: 35px;
cursor: pointer;
}
.decrement {
padding: 15px 5px 15px 25px;
border-radius: 45px 0 0 45px;
}
.increment {
padding: 15px 25px 15px 5px;
border-radius: 0 45px 45px 0;
}
UPD:
Если я убираю readonly и ставлю любое число в input сам, то + - начинают работать. В самом коде страницы я заметил, что value без значения, оно просто не работает.