Как получить значение количества для обновления при нажатии кнопок «плюс» и «минус» и вызове их функций - PullRequest
Новая
       16

Как получить значение количества для обновления при нажатии кнопок «плюс» и «минус» и вызове их функций

0 голосов
/ 27 января 2019

Для сайта подарков, над которым я работаю, у меня возникают трудности с получением количества для изменения с помощью кнопок плюс и минус. Есть несколько элементов, отображаемых на странице в таблице, поэтому в идеале я бы мог изменить количество для каждого в отдельности.

В тегах html-сценариев я вставил сценарий JavaScript, содержащий функции для увеличения и уменьшения значения при каждом нажатии соответствующей кнопки, но при запуске веб-приложения при нажатии кнопок ничего не происходит

Ниже приведен скрипт на html: 

<script>
var count = 1;
var countEl = document.getElementById("count");
function plus(){
    count++;
    countEl.value = count;
}
function minus(){
    if (count > 1) {
        count--;
        countEl.value = count;
    }
}
</script>

Ниже приведен HTML-код, который включает кнопки: 

 <c:forEach var = "row" items = "${result.rows}">
        <tr>
            <td><c:out value = "${row.gift_code}"/></td>
            <td><c:out value = "£${row.price}"/></td>
            <td><c:out value = "${row.stock}"/></td>
            <td><div id="outer">
                <div><button type="button" name="button"onclick="minus()"><img src="minus.jpg" alt="minus"/></button></div>
                <div><input type="text" name="name" value="1" size="10" id="count"></div>
                <div><button type="button" name="button"onclick="plus()"><img src="plus.jpg" alt="plus"/></button></div>
                </div>
            </td>
            <td>
                <form action="order.jsp" method="GET">
                    <input type = "hidden" name = "gift_code"
                           value = "${row.gift_code}" />
                    <input type = "hidden" name = "price"
                           value = "${row.price}" />
                    <input type = "submit" value = "Add to giftlist" />
                    <input type = "hidden" name = "stock"
                           value = "${row.stock}" />

                </form>
            </td>
        </tr>

    </c:forEach>

Количество должно увеличиться на 1 при нажатии кнопки «плюс» и уменьшиться на 1 при нажатии кнопки «минус», но количество в настоящее время остается неизменным

1 Ответ

0 голосов
/ 27 января 2019

Я протестировал ваш код, и он работал хорошо, но он не будет работать с несколькими входами, так как вы будете использовать одни и те же переменные.Если ваш код не работает, и ваш HTML-файл в точности похож на тот, который вы указали, проблема может заключаться в связи между вашим HTML-кодом и вашим кодом JavaScript.У вас есть что-то вроде <script src="myscripts.js"></script> в вашем HTML?Эта страница может вам помочь: https://www.w3schools.com/tags/att_script_src.asp

Если нет, вот пример, который работает с несколькими входами: 

function plus(elem){
    let targetElem = elem.parentNode.previousElementSibling.childNodes[0];
    let targetCount = parseInt(targetElem.value);
    targetCount++;
    targetElem.value = targetCount;
}
function minus(elem){
    let targetElem = elem.parentNode.nextElementSibling.childNodes[0];
    let targetCount = parseInt(targetElem.value);
    if (targetCount > 1) {
        targetCount--;
        targetElem.value = targetCount;
    }
}
<c:forEach var = "row" items = "${result.rows}">
        <tr>
            <td><c:out value = "${row.gift_code}"/></td>
            <td><c:out value = "£${row.price}"/></td>
            <td><c:out value = "${row.stock}"/></td>
            <td><div id="outer">
                <div><button type="button" name="button"onclick="minus(this)"><img src="minus.jpg" alt="minus"/></button></div>
                <div><input type="text" name="name" value="1" size="10" id="count1"></div>
                <div><button type="button" name="button"onclick="plus(this)"><img src="plus.jpg" alt="plus"/></button></div>
                
                                <div><button type="button" name="button"onclick="minus(this)"><img src="minus.jpg" alt="minus"/></button></div>
                <div><input type="text" name="name" value="1" size="10" id="count2"></div>
                <div><button type="button" name="button"onclick="plus(this)"><img src="plus.jpg" alt="plus"/></button></div>
                </div>
            </td>
            <td>
                <form action="order.jsp" method="GET">
                    <input type = "hidden" name = "gift_code"
                           value = "${row.gift_code}" />
                    <input type = "hidden" name = "price"
                           value = "${row.price}" />
                    <input type = "submit" value = "Add to giftlist" />
                    <input type = "hidden" name = "stock"
                           value = "${row.stock}" />

                </form>
            </td>
        </tr>

    </c:forEach>

Обратите внимание на добавленные в функцию параметры и способ использования элемента на соответствующем входе.Если у вас есть какие-либо вопросы о том, как это работает.Не стесняйтесь спрашивать.

...