Заполните многие поля ввода значением кнопок с помощью jquery и javascript

у меня есть 4 поля ввода. я пытаюсь заполнить каждое поле ввода значением из многих кнопок, когда я нахожусь в фокусе этого поля ввода, но каждый раз, когда все входные данные также автоматически заполняются. как я могу исправить эту проблему, пожалуйста? Спасибо

//input field
$("input.valu1").click(function () {
    $(this).focus();
    var $thise1 = $('input.valu1');

    $(".zahlen td button").click(function () {
        $thise1.val($thise1.val() + $.trim($(this).text()));


    });


});

$("input.valu2").click(function () {
    $(this).focus();

    var $thise2 = $('input.valu2');

    $(".zahlen td button").click(function () {

        $thise2.val($thise2.val() + $.trim($(this).text()));




    });
});


  $("input.valu3").click(function () {
    $(this).focus();

    var $thise3 = $('input.valu3');

    $(".zahlen td button").click(function () {

        $thise3.val($thise3.val() + $.trim($(this).text()));




    });
});

$("input.value4").click(функция () { $(это).фокус();

    var $thise4 = $('input.valu4');

    $(".zahlen td button").click(function () {

        $thise4.val($thise4.val() + $.trim($(this).text()));




    });
});

мой код здесь

Поделитесь своим HTML-кодом

— 15.03.2019 11:43

jquery

15.03.2019 11:40

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Ответы 1

Ваш код слишком сложен для своей цели. Чем больше ваш код будет расти, тем сложнее будет добавить новый компонент в ваше приложение. Вам нужно факторизовать некоторую часть вашего кода.

В любом случае, вот способ, которым вы можете решить свою проблему. Возможно, вам придется адаптировать его к вашему коду.

$(function () {
    var inputFocus = null;
    $('input').click(function(){
      inputFocus = $(this);
    });
    
    $('button').on('click', function() {
      if (inputFocus != null) {
        var valueButton = $(this).html();
        var valueInput = $(inputFocus).val();
        $(inputFocus).val(valueInput + valueButton);
        $('.error').html('');
      } else {
        $('.error').html("Error: you need to select an input first");
      }
    });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class = "row">
        <div class = "col-lg-12">
            <p class = "add">Addition</p>
            <table>

                <tr>
                    <td>1</td>
                    <td>+</td>
                    <td>93</td>
                    <td>=</td>
                    <td><input type = "number" name = "valu" class = "valu1"></td>
                    <!-- the last for the glyphicon -->
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>+</td>
                    <td>13</td>
                    <td>=</td>
                    <td><input type = "number" name = "valu" class = "valu2"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>+</td>
                    <td>3</td>
                    <td>=</td>
                    <td><input type = "number" name = "valu" class = "valu3"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>+</td>
                    <td>30</td>
                    <td>=</td>
                    <td><input type = "number" name = "valu" class = "valu4"></td>
                    <td></td>
                </tr>
                <tr>
                </tr>
            </table>
        </div>
    </div>
  
    <table class = "zahlen" style = "margin:0 auto;">
        <tr>
            <td><button>0</button></td>
            <td><button>1</button></td>
            <td><button>2</button></td>
            <td><button>3</button></td>
            <td><button>4</button></td>

        </tr>
        <tr>
            <td><button>5</button></td>
            <td><button>6</button></td>
            <td><button>7</button></td>
            <td><button>8</button></td>
            <td><button>9</button></td>
        </tr>
    </table>
  <p class = "error" style = "color: red"></p>
</body>

15.03.2019 12:27

Другие вопросы по теме

Переменная .NET Core не существует / пуста в представлении

«Сохранение» значения в альтернативе Chrome input type = «hidden»

Как скрыть значения для типа ввода при нажатии на переключатель с помощью jQuery?

Не удается прочитать данные JSON с помощью JQuery

Разбивка на страницы не работает при фильтрации данных в codeigniter

Добавить HTML с тройными кавычками в атрибуте

Переход на страницу выхода из системы при закрытии и триггер события обновления

Попытка заставить выбранный атрибут работать

Параметр выбора Django остается после того, как в шаблоне появится сообщение об ошибке, если я изменю параметр в выборе

Jquery не загружается при обычном обновлении

Заполните многие поля ввода значением кнопок с помощью jquery и javascript

Ответы 1

Другие вопросы по теме

Похожие вопросы