Как использовать одну функцию для нескольких входов в javascript

Я хотел бы знать, как использовать один метод для обоих входов в javacript.

У меня есть форма с двумя полями ввода, вызывающая функцию для форматирования currecny. Мне нужно знать, как применить одну и ту же функцию для двух разных входов.

  formatCurrency(e){
    var myinput = e.target.value;
      var val = myinput;
      val = val.replace(/[^0-9\.]/g,'');      
      if (val != "") {
        var valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
        val = valArr.join('.');
      }      
     document.getElementById("samount").value = val;
  }

  formatRCurrency(e){
    var myinput = e.target.value;
      var val = myinput;
      val = val.replace(/[^0-9\.]/g,'');      
      if (val != "") {
        var valArr = val.split('.');
        valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
        val = valArr.join('.');
      }      
      document.getElementById("tamount").value = val;
  }

  <input type = "text" id = "samount" name = "samount" class = "form-control"  @keyup=${this.formatSCurrency} >
  <input type = "text" id = "tamount" name = "tamount" class = "form-control" @keyup=${this.formatRCurrency} >

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
4 830
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

e.target относится к <input>, над которым вы работаете, поэтому просто измените

document.getElementById(...).value = val;

к

e.target.value = val;

и вы сможете использовать одну и ту же функцию для обоих входов. Также, вероятно, больше не нужны ids.

<input type = "text" name = "samount" class = "form-control"  @keyup=${this.formatCurrency} >
<input type = "text" name = "tamount" class = "form-control" @keyup=${this.formatCurrency} >

а также

formatRCurrency(e){
  var value = e.target.value;
  value = value.replace(/[^0-9\.]/g,'');      
  if (value !== "") {
    var valArr = val.split('.');
    valArr[0] = (parseInt(valArr[0],10)).toLocaleString();
    val = valArr.join('.');
  }      
  e.target.value = val;
}

(обратите внимание, что ваша переменная myinput на самом деле содержит нить, а не HTMLInputElement, что может сбивать с толку — лучше использовать точные имена переменных)

Простой способ добиться этого — внимательно изучить атрибут id целевого элемента и принять соответствующие меры. Например...

function eventHandler(e) {
    var targetID = e.target.id;

    switch(targetID) {
        case "samount":
            /* 'samount' specific process */
            break;
        default:
           /* 'tamount' specific process */
    }
}

Если вы хотите выполнить один и тот же процесс независимо от активного элемента, свойство event.target содержит ссылку на этот элемент...

function eventHandler(e) {
    var element = e.target;
    var val = element.value;
    // process 'val' etc ....
    element.value = new_value;
}

Надеюсь, это поможет. :)

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