+1 и -1 к переменной при нажатии на кнопку

K

Konpolya

Постоялец
Регистрация
23 Окт 2015
Сообщения
91
Реакции
11
Здравствуйте! Подскажите, есть
поле <input type="text" value="' . $count . '">
и кнопка, при нажатии на которой $count должен увеличиваться на 1.
Эту кнопку только путем яваскрипта можно организовать? При этом нужно, чтобы в поле по стандарту выводило value=1, и можно было от руки написать любое число в него
 
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Empty</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="text" value="1" id="count">
        <button type="button" id="increase">+1</button>
        <button type="button" id="decrease">-1</button>
        <script>
            const count_field = document.querySelector("input#count")
            const increase_button = document.querySelector("button#increase")
            const decrease_button = document.querySelector("button#decrease")

            increase_button.addEventListener("click", () => {
                count_field.value = Number(count_field.value) + 1
            })

            decrease_button.addEventListener("click", () => {
                count_field.value = Number(count_field.value) - 1
            })
        </script>
    </body>
</html>

Оно?
 
Sorcus написал(а):
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Empty</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="text" value="1" id="count">
        <button type="button" id="increase">+1</button>
        <button type="button" id="decrease">-1</button>
        <script>
            const count_field = document.querySelector("input#count")
            const increase_button = document.querySelector("button#increase")
            const decrease_button = document.querySelector("button#decrease")

            increase_button.addEventListener("click", () => {
                count_field.value = Number(count_field.value) + 1
            })

            decrease_button.addEventListener("click", () => {
                count_field.value = Number(count_field.value) - 1
            })
        </script>
    </body>
</html>

Оно?
Нажмите для раскрытия...
О да! Спасибо! А как поставить пределы ? от 1 и до $max?
 
Konpolya написал(а):
О да! Спасибо! А как поставить пределы ? от 1 и до $max?
Нажмите для раскрытия...
Наверное как-то так:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Empty</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="text" value="1" id="count">
        <button type="button" id="increase">+1</button>
        <button type="button" id="decrease">-1</button>
        <script>
            const count_field = document.querySelector("input#count")
            const increase_button = document.querySelector("button#increase")
            const decrease_button = document.querySelector("button#decrease")

            const is_range_exceeded = (value, max = 1000) => {
                if (value < 1 || value > max) {
                    return true
                }
                return false
            }

            increase_button.addEventListener("click", () => {
                let value = Number(count_field.value)
                if (is_range_exceeded(value + 1)) {
                    // Do something when exceeded
                    console.log(`${value + 1} not allowed`)
                    return null
                }
                count_field.value = value + 1
            })

            decrease_button.addEventListener("click", () => {
                let value = Number(count_field.value)
                if (is_range_exceeded(value - 1)) {
                    // Do something when exceeded
                    console.log(`${value - 1} not allowed`)
                    return null
                }
                count_field.value = value - 1
            })
        </script>
    </body>
</html>

:glob:
 
Спасибо! Но встал вопрос такой: кнопкой прибавить до предела можно и не больше, а вписать "от руки" можно. Попробовал сменить type вместо text вставил number, добавил min=1 max=$max.
И получилось, но кнопки +- очень мелкие, но их можно увеличить)
<input type="number" min="1" max="4">
 
Konpolya написал(а):
Спасибо! Но встал вопрос такой: кнопкой прибавить до предела можно и не больше, а вписать "от руки" можно. Попробовал сменить type вместо text вставил number, добавил min=1 max=$max.
И получилось, но кнопки +- очень мелкие, но их можно увеличить)
<input type="number" min="1" max="4">
Нажмите для раскрытия...

Как-то так.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Empty</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="text" value="1" id="count">
        <button type="button" id="increase">+1</button>
        <button type="button" id="decrease">-1</button>
        <script>
            let previous_value = null
            const count_field = document.querySelector("input#count")
            const increase_button = document.querySelector("button#increase")
            const decrease_button = document.querySelector("button#decrease")

            const is_range_exceeded = (value, max = 1000) => {
                if (value < 1 || value > max) {
                    return true
                }
                return false
            }

            increase_button.addEventListener("click", () => {
                let value = Number(count_field.value)
                if (is_range_exceeded(value + 1)) {
                    // Do something when exceeded
                    console.log(`${value + 1} not allowed`)
                    return null
                }
                count_field.value = value + 1
            })

            decrease_button.addEventListener("click", () => {
                let value = Number(count_field.value)
                if (is_range_exceeded(value - 1)) {
                    // Do something when exceeded
                    console.log(`${value - 1} not allowed`)
                    return null
                }
                count_field.value = value - 1
            })

            count_field.addEventListener("input", () => {
                let value = Number(count_field.value)
                if (is_range_exceeded(value)) {
                    // Do something when exceeded
                    console.log(`${value} not allowed`)
                    count_field.value = previous_value
                    return null
                }
                previous_value = value
            })
        </script>
    </body>
</html>

А с визуальной частью это тебе уже в вёрстку надо :glob::ah:
 
1. Перенесено в раздел JavaScript, так как вопрос явно не по PHP
2. Использование констант для элементов DOM структуры является явным признаком быдло-кода. Динамические объекты, которые могут быть удалены из HTML контента рекомендуется хранить в обычных переменных. Впрочем, если не заморачиваться над эстетикой, можете меня просто проигнорировать.
 
Viodele написал(а):
1. Перенесено в раздел JavaScript, так как вопрос явно не по PHP
2. Использование констант для элементов DOM структуры является явным признаком быдло-кода. Динамические объекты, которые могут быть удалены из HTML контента рекомендуется хранить в обычных переменных. Впрочем, если не заморачиваться над эстетикой, можете меня просто проигнорировать.
Нажмите для раскрытия...

По поводу констант я хз.
Для просмотра ссылки Войди или Зарегистрируйся - здесь например написано про константы противоположное.
Ну или не совсем. 50 / 50.
Если код зависит от ссылки на HTML-элемент, то нам нужно обеспечить неизменность этой ссылки.
Нажмите для раскрытия...
:oops:
 
Viodele написал(а):
1. Перенесено в раздел JavaScript, так как вопрос явно не по PHP
2. Использование констант для элементов DOM структуры является явным признаком быдло-кода. Динамические объекты, которые могут быть удалены из HTML контента рекомендуется хранить в обычных переменных. Впрочем, если не заморачиваться над эстетикой, можете меня просто проигнорировать.
Нажмите для раскрытия...
Хотя если подумать еще раз над статейкой, то наверное правильнее было бы использовать const для кнопок, но не для input-а.
Или я опять не прав? :oops:
 
Давай включим немного логику. Константа используется для хранения инфы, которая не меняется в принципе за все время исполнения скрипта. Любой элемент DOM структуры может быть тупо удален из HTML контента. К чему тогда физически будет привязана твоя константа? :)
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху