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

Тема в разделе "JavaScript", создана пользователем Konpolya, 5 сен 2018.

  1. Konpolya

    Konpolya Постоялец

    Регистр.:
    23 окт 2015
    Сообщения:
    84
    Симпатии:
    10
    Здравствуйте! Подскажите, есть
    поле <input type="text" value="' . $count . '">
    и кнопка, при нажатии на которой $count должен увеличиваться на 1.
    Эту кнопку только путем яваскрипта можно организовать? При этом нужно, чтобы в поле по стандарту выводило value=1, и можно было от руки написать любое число в него
     
  2. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    424
    Симпатии:
    782
    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>
    
    Оно?
     
    inturned и Konpolya нравится это.
  3. Konpolya

    Konpolya Постоялец

    Регистр.:
    23 окт 2015
    Сообщения:
    84
    Симпатии:
    10
    О да! Спасибо! А как поставить пределы ? от 1 и до $max?
     
  4. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    424
    Симпатии:
    782
    Наверное как-то так:
    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:
     
    inturned и Konpolya нравится это.
  5. Konpolya

    Konpolya Постоялец

    Регистр.:
    23 окт 2015
    Сообщения:
    84
    Симпатии:
    10
    Спасибо! Но встал вопрос такой: кнопкой прибавить до предела можно и не больше, а вписать "от руки" можно. Попробовал сменить type вместо text вставил number, добавил min=1 max=$max.
    И получилось, но кнопки +- очень мелкие, но их можно увеличить)
    <input type="number" min="1" max="4">
     
  6. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    424
    Симпатии:
    782
    Как-то так.
    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:
     
  7. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    131
    Симпатии:
    544
    1. Перенесено в раздел JavaScript, так как вопрос явно не по PHP
    2. Использование констант для элементов DOM структуры является явным признаком быдло-кода. Динамические объекты, которые могут быть удалены из HTML контента рекомендуется хранить в обычных переменных. Впрочем, если не заморачиваться над эстетикой, можете меня просто проигнорировать.
     
    Sorcus нравится это.
  8. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    424
    Симпатии:
    782
    По поводу констант я хз.
    https://habr.com/company/ruvds/blog/420359/ - здесь например написано про константы противоположное.
    Ну или не совсем. 50 / 50.
    :oops:
     
  9. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    424
    Симпатии:
    782
    Хотя если подумать еще раз над статейкой, то наверное правильнее было бы использовать const для кнопок, но не для input-а.
    Или я опять не прав? :oops:
     
  10. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    131
    Симпатии:
    544
    Давай включим немного логику. Константа используется для хранения инфы, которая не меняется в принципе за все время исполнения скрипта. Любой элемент DOM структуры может быть тупо удален из HTML контента. К чему тогда физически будет привязана твоя константа? :)