Parameters from HTML to Javascript?

InfoBeginnerByInfoBeginner

Hello, I would like to use parameters that can be selected from a dropdown list in the JavaScript part. Below, you can see two dropdown lists in the HTML part. They should both be the parameters of the variable "dis." I managed to do it with the first list, but I can't get the second list to work this way. I hope someone here has an idea.

 <aside id="right"> <h3>Start:</h3> <select name="start" onchange="handleChange(this)"> <option value="default" selected>Bitte auswählen</option> <option value="em">Em</option> <option value="wst">Wst</option> <option value="au">Au</option> <option value="wi">Wi</option> <option value="ma">Ma</option> <option value="dy">Dy</option> <option value="wil">Wil</option> </select> <!-- Abschluss-Tag für die erste Dropdown-Liste --> <h3>Ziel:</h3> <select name="ziel"> <option value="default" selected>Bitte auswählen</option> <option value="em">Em</option> <option value="wst">Wst</option> <option value="au">Au</option> <option value="wi">Wi</option> <option value="ma">Ma</option> <option value="dy">Dy</option> <option value="wil">Wil</option> </select> <button id="ber">Berechnen </button> <div id="totalDistance"></div>

Here is the Java Script part:

 const button = document.getElementById("ber"); button.addEventListener("click", () => { handleChange(document.getElementById("start")); }); function handleChange(selectElement) { const selectedValue = selectElement.value; let dis; switch (selectedValue) { case "em": dis = latlngs.slice(0, 200); break; case "wst": dis = latlngs.slice(116, 200); break; case "au": dis = latlngs.slice(138, 200); break; case "wi": dis = latlngs.slice(163, 200); break; case "ma": dis = latlngs.slice(184, 200); break; case "dy": dis = latlngs.slice(237, 273); break; case "wil": dis = latlngs.slice(273, 274); break; default: break; } console.log(dis); // Ausgabe der neuen Variable in der Konsole zum Test
2 votes, average: 2.00 out of 1 (2 rating, 2 votes, rated)
You need to be a registered member to rate this.
Loading...
Subscribe
Notify of
3 Answers
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
karotte1386824
karotte1386824
2 years ago

You can simply include the second dropdown list in the "onchange" event handler by adding another line that calls the "handleChange" function with the corresponding dropdown list: “ Then the "handleChange" function is called as soon as an option is selected in the second dropdown list

0
InfoBeginner
Author
InfoBeginner
2 years ago
Reply to  karotte1386824

Okay, I'm new to javascript and that's why I have to ask stupid. ie I give the same to the HTML part on the 2 list and in the scrpt part under the switchcase again the "handleChange" function? And how exactly do I refer to the second list? Thanks for the answer

0
regex9
regex9
2 years ago

You can locate both selection fields in the DOM by using them id – Equipped with attributes. I would use the event handler for the calculation addEventListener -Function to the respective interaction elements.

HTML (abbreviated):

JavaScript:

 const startSelect = document.getElementById("start"); const endSelect = document.getElementById("end"); const calculateButton = document.getElementById("calculate-button"); function calculate() { const start = startSelect.value; const end = endSelect.value; /* ... */ } calculateButton.addEventListener("click", calculate); startSelect.addEventListener("change", calculate); endSelect.addEventListener("change", calculate);

In : -You can determine the currently selected values ​​and then reprocess them as required.

1