Zur Navigation

Script auf mehrere Input-Felder erweitern

1 AndiN

Hallo zusammen,
ich habe folgendes Script um Inputfelder/Schieberegler zu steuern. Das Script funktioniert auch prima. Nun habe ich ein Formular mit mehreren Inputfeldern/Schiebereglern und scheitere gerade daran, dieses Script so umzubauen, dass es auch für mehrere Schieberegler unabhängig voneinander funktioniert. Hat mir da jemand einen Tipp?

<script>
const rangeInputs = document.querySelectorAll('input[type="range"]')
const numberInput = document.querySelector('input[type="number"]')

function handleInputChange(e)
{
	let target = e.target
	if (e.target.type !== 'range')
	{
		target = document.getElementById('alter')
	} 
	const min = target.min
	const max = target.max
	const val = target.value
	target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
}
</script>
<form action="" method="post" id="s_form">
<div>Wie alt bist du?
	<input type="range" value="25" min="1" max="100" id="alter" oninput="rangenumber.value=value">
	<input type="number" id="rangenumber" min="0" max="100" value="70" oninput="alter.value=value">
</div>
</form>

23.10.2022 12:52

2 Jörg Kruse

Das ist ein React-Script?

Die ID "rangenumber" würde ich analog zur ID des Eingebafeldes benennen, in etwa so:

<div>Wie alt bist du?
	<input type="range" value="70" min="1" max="100" id="alter" oninput="numberAlter.value=value">
	<input type="number" id="numberAlter" min="0" max="100" value="70" oninput="alter.value=value">
</div>
<div>Wie gross bist du?
	<input type="range" value="170" min="120" max="220" id="groesse" oninput="numberGroesse.value=value">
	<input type="number" id="numberGroesse" min="120" max="220" value="170" oninput="groesse.value=value">
</div>

In handleInputChange() könntest du die ID des Range-Inputs dann mithilfe von substring() und toLower() aus der ID des Number-Inputs ableiten:

	if (e.target.type !== 'range')
	{
		let id = e.target.id.substring(5).toLowerCase();
		target = document.getElementById(id)
	}

23.10.2022 16:04 | geändert: 23.10.2022 16:05

1 Forenmitglied fand diesen Beitrag gut

3 AndiN

Perfekt! Genau das habe ich gebraucht! :-)

23.10.2022 17:45

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]