|
Сообщение от 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];
|
Но всё-таки, почему оно звенело?
