Форматирование ввода-вывода телефонного номера

Используя предложенный код из ответа на Регулярное выражение для переформатирования номера телефона в США в Javascript, я пытаюсь вывести отформатированные телефонные номера, поступающие из пользовательского ввода, в виде типичной HTML-формы. Я знаю, что функции форматирования чисел работают правильно, потому что, если вы передадите явный аргумент функции, она сработает. Так что я подумал, что, возможно, мой ввод не поступал в виде строки. Но я пробовал конвертировать через String () и toString (), но мне не повезло. Я что-то упускаю?

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

Примечание. Для запуска сценария необходимо нажать кнопку «Отправить» под формой.

function populate(){	

	var officePhone = document.getElementsByName("input_office_phone")[0],
		cellPhone = document.getElementsByName("input_cell_phone")[0];
	
	
	function formatOfficePhone(officePhoneString) {
  		var cleaned = ('' + officePhoneString).replace(/\D/g, '')
  		var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
  		if (match) {
    		return match[1] + '.' + match[2] + '.' + match[3]
  		}
  		return null
	}
	
	
	function formatCellPhone(cellPhoneString) {
  		var cleaned = ('' + cellPhoneString).replace(/\D/g, '')
  		var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
  		if (match) {
    		return match[1] + '.' + match[2] + '.' + match[3]
  		}
  		return null
	}
	
	
	

	document.getElementById("office_phone").innerHTML = formatOfficePhone(officePhone);
	document.getElementById("cell_phone").innerHTML = formatCellPhone(cellPhone);

	
}

<!doctype html>
<html>
<body>
<strong>***INPUT***</strong><br>
<form>
  Office Phone:
  <input type = "text" name = "input_office_phone">
  <br>
  Cell Phone:
  <input type = "text" name = "input_cell_phone">
  <br>
  <br>
  <button type = "button" onClick = "populate()">Submit</button>
</form>
<br>
<strong>***OUTPUT***</strong><br>
<strong>office:</strong> <span id = "office_phone"></span> <br>
<strong>cell:</strong> <span id = "cell_phone"></span> 

</body>
</html>

javascript html

13.09.2018 23:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Проблема возникает из-за того, что вы получаете ссылку на входные элементы input_office_phone и input_cell_phone, но не на содержащееся в них значение. Чтобы решить эту проблему, вам нужно получить .value элемента, как в примере ниже.

Другая очистка:

У вас были две идентичные функции для форматирования обоих телефонных номеров вместо повторного использования одной и той же функции. Я убрал это ниже.
Вы объявляли свои функции форматирования в функции populate(). В идеале вы не хотите, чтобы функции были вложены в другие функции, поэтому я разделил их ниже.

Надеюсь это поможет!

function formatPhone(number) {
  var cleaned = ('' + number).replace(/\D/g, '')
  var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
  if (match) {
    return match[1] + '.' + match[2] + '.' + match[3]
  }
  return null
}

function populate() {
  var officePhone = document.getElementsByName("input_office_phone")[0].value,
    cellPhone = document.getElementsByName("input_cell_phone")[0].value;

  document.getElementById("office_phone").innerHTML = formatPhone(officePhone);
  document.getElementById("cell_phone").innerHTML = formatPhone(cellPhone);
}

<strong>***INPUT***</strong><br>
<form>
  Office Phone:
  <input type = "text" name = "input_office_phone">
  <br> Cell Phone:
  <input type = "text" name = "input_cell_phone">
  <br>
  <br>
  <button type = "button" onClick = "populate()">Submit</button>
</form>
<br>
<strong>***OUTPUT***</strong><br>
<strong>office:</strong> <span id = "office_phone"></span> <br>
<strong>cell:</strong> <span id = "cell_phone"></span>

Превосходно! В этом и заключалась проблема. Спасибо за помощь и несколько советов по уборке. Я разделил функцию на две, потому что тестировал несколько вариантов форматирования ... забыл пойти дальше и собрать все вместе. Что касается вложенных функций, я больше привык к некоторым другим языкам, где вложенные функции приемлемы и являются нормой, поэтому я всегда забываю, что это нежелательно в JS. Еще раз спасибо, дружище!

— 13.09.2018 23:37

13.09.2018 23:27