[Malleys]

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

Общее решение для таких связанных полей...

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];

Но всё-таки, почему оно звенело?