Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2019, 23:12
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Принцип устройства конвертирования
Здравствуйте!
Покажите пожалуйста схему как делать конвертирование. Я видел что вводят unit с массивами значений (мне laimas как то помог), но я не смог уловить саму идею в контексте большого скрипта. Так как я делаю - это жесть.

Поэтому прошу показать на упрощённом примере решение для таких задач:

1. Измерить удава (из 38 попугаев)
1 удав = 2 слонёнка = 5 мартышек = 38 попугаев.
Макет:
Удавов: <input type="number" name="animal"><br>
Слонёнка: <input type="number" name="animal"><br>
Мартышек: <input type="number" name="animal"><br>
Попугаев: <input type="number" name="animal"><br>

<script>
    let animals = document.querySelectorAll('input[name="animal"]');

    animals.forEach(el => el.addEventListener('input', function () {

    }));
</script>


Ну а второй пример - классика жанра, единицы длины:
1000мм = 100см = 1м
Макет:
мм: <input type="number" name="unit"><br>
см: <input type="number" name="unit"><br>
м: <input type="number" name="unit"><br>
<script>
    let unit = document.querySelectorAll('input[name="unit"]');

    unit.forEach(el => el.addEventListener('input', function () {

    }));
</script>


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

Если не сложно, покажите пожалуйста решение.
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2019, 23:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

MC-XOBAHCK,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
мм: <input type="number" name="unit"><br>
см: <input type="number" name="unit"><br>
м: <input type="number" name="unit"><br>
<script>
        let unit = document.querySelectorAll('input[name="unit"]');
        const rang = [1000, 100, 1];
        unit.forEach((el, i)=> (el.value = rang[i], el.addEventListener('input', function () {
        let val = el.value / rang[i];
        unit.forEach((el, k)=>{
            el.value = val * rang[k]
        })
        })));
</script>

</body>
</html>

Последний раз редактировалось рони, 04.07.2019 в 12:49.
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2019, 00:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

MC-XOBAHCK,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
Удавов: <input type="number" name="animal"><br>
Слонёнка: <input type="number" name="animal"><br>
Мартышек: <input type="number" name="animal"><br>
Попугаев: <input type="number" name="animal"><br>

<script>
    let unit = document.querySelectorAll('input[name="animal"]');
    const rang = [1, 2, 5, 38];
    unit.forEach((el, i)=> (el.value = rang[i], el.addEventListener('input', function () {
    let val = el.value / rang[i];
    unit.forEach((el, k)=>{
      el.value = (val * rang[k] *100|0)/100
    })
    })));
</script>

</body>
</html>

Последний раз редактировалось рони, 04.07.2019 в 12:48.
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2019, 07:29
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от MC-XOBAHCK
Поэтому прошу показать на упрощённом примере решение для таких задач:
Общее решение для таких связанных полей...
addEventListener("input", ({ target }) => {
	const relatedInputs = (target.form || document)
		.querySelectorAll(`input[type="number"][name="${event.target.name}"]`);
	const value = Number(target.value);
	const unit = Number(target.getAttribute("value"));
	
	for(const input of relatedInputs) {
		if(input === event.target) continue;
		input.value = value * Number(input.getAttribute("value")) / unit;
	}
});


MC-XOBAHCK, это решение предполагает, что вы укажете в самих полях в атрибуте value пример конвертации.

Если вы будете указывать отдельно в массиве, то вероятно запутаетесь и сделаете ошибку.

Такая конвертация однотипна, один скрипт может обрабатывать всё поля.

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

Вот пример целиком...

<style>
form {
	display: grid;
	grid-template-columns: 1fr 5fr;
	gap: 1em;
	text-align: right;
	margin: 1em;
	padding: 1em;
	max-width: 30em;
}

form > label {
	display: contents;
}
</style>

<script>

addEventListener("input", ({ target }) => {
	const relatedInputs = (target.form || document)
		.querySelectorAll(`input[type="number"][name="${event.target.name}"]`);
	const value = Number(target.value);
	const unit = Number(target.getAttribute("value"));
	
	for(const input of relatedInputs) {
		if(input === event.target) continue;
		input.value = value * Number(input.getAttribute("value")) / unit;
	}
});

</script>

<form>
	<label>мм: <input type="number" name="unit" value="1000"></label>
	<label>см: <input type="number" name="unit" value="100"></label>
	<label>м:  <input type="number" name="unit" value="1"></label>
</form>

<form>
	<label>Удавов:   <input type="number" name="animal" value="1"></label>
	<label>Слонёнка: <input type="number" name="animal" value="2"></label>
	<label>Мартышек: <input type="number" name="animal" value="5"></label>
	<label>Попугаев: <input type="number" name="animal" value="38"></label>
</form>


Можно с формой, а можно без формы. Форма позволяет изолировать друг от друга одноимённые поля.

Удобно ведь таким образом? Указываешь в поле курсы валют, длины, объёмы, площади и всё остальное, что можно конвертировать, и оно работает!

Вы понимаете, как можно добавить ещё один конвертер?

UPD рони, вы всё-таки запутались в массивах и полях (потому что в двух разных местах) и у вас получается, что 1 м равен 10 см!

Также при таком подходе поля сразу заполнены правильным примером, и у пользователя не складывается впечатление, что ему придётся заполнять все эти поля.

Сообщение от рони
const rang = [1, 2, 5, 38];
Но всё-таки, почему оно звенело?

Последний раз редактировалось Malleys, 04.07.2019 в 07:43.
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2019, 11:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

Сообщение от Malleys
Но всё-таки, почему оно звенело?
ну вы сами знаите, что ваша логика или это ваш тонкий юмор, мне не доступны.
Сообщение от Malleys
input.value = value * Number(input.getAttribute("value")) / unit;
Number зачем?
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2019, 11:43
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

рони, Спасибо! Именно то что я спрашивал.

Malleys, Спасибо!
В ваших скриптах, как обычно, для меня есть что то новое, познавательное и очень полезное. В 10 строчках - для меня сразу 4 новинки. Закинул код в VSCode (привычная подсветка), посмотрел в доках MDN - всё просто и понятно.
Большое спасибо за ваш пример!
Ответить с цитированием
  #7 (permalink)  
Старый 04.07.2019, 11:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

Сообщение от Malleys
вы всё-таки запутались в массивах
поправил
Ответить с цитированием
  #8 (permalink)  
Старый 04.07.2019, 12:07
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от рони
ну вы сами знаете, что ваша логика или это ваш тонкий юмор, мне не доступны.
Вы назвали переменную rang, прошедшее время от ring... Типо это прозвоненные значения? Только как-то не складно! Типо колокольчик звенит, когда меняются связанные поля? Но почему оно названо так, как будто ему больше не надо звенеть?

Сообщение от рони
Number зачем?
Приведение типа String к типу Number.

Сообщение от рони
ну вы сами знаете, что ваша логика или это ваш тонкий юмор, мне не доступны.
Или это скрытая реклама индийского кино? Или программный сбой .. .. .... . .. . https://youtu.be/CPlcYKLQg_k

Последний раз редактировалось Malleys, 04.07.2019 в 12:23.
Ответить с цитированием
  #9 (permalink)  
Старый 04.07.2019, 12:18
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 473

Сообщение от рони
Number зачем?
Наверное потому что
typeof input.getAttribute("value") == 'string'

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

Для меня вот такой подход с конструктором Number - это приятная новинка, упрощающая жизнь:
const value = Number(target.value);

Признаюсь, я раньше так никогда не делал. Теперь для чисел только так буду парсить значения.
Ответить с цитированием
  #10 (permalink)  
Старый 04.07.2019, 12:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

Сообщение от MC-XOBAHCK
Наверное потому что
в коде нет сложения, поэтому приведение к Number избыточно.
Сообщение от MC-XOBAHCK
const value = Number(target.value);
как вариант
const value = +target.value;
const value =  target.value * 1;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Musvk принцип работы расширения eafxl Events/DOM/Window 4 24.09.2017 22:19
Рядовой программист и принцип работы ПК zhurchik Оффтопик 46 14.06.2015 17:25
Определение устройства zoOmer Общие вопросы Javascript 1 19.10.2014 10:58
Драйверы и устройства FanAizu Оффтопик 1 20.02.2014 06:18
Принцип работы счетчика liveinternet paveljava5 Общие вопросы Javascript 5 02.08.2010 11:53