CODEWITHSUNDEEP
javascript
Maria
Maria

Reputation: 47

JS code works on Firefox but not on Chrome or Edge

It's little bit strange why the code is running smoothly on FireFox but not on Chrome and Edge. I know that a lot of the code is repeating(It's for the snippet),however the main problem is with the stationid field:

 <input type="number" id="stationId" name="stationid" />

When I select Line: 623-1 and choose any position, in the stationid field the value should be inserted, this works in Firefox as I said. What can cause such misbehavior?

This is the function where the magic happens:

function CreateOption(position, stationId) {
    var newOption = document.createElement("option");
    newOption.value = stationId;
    newOption.innerText = position;
    chosenPosition.appendChild(newOption);

    newOption.addEventListener("click", function () {
        document.getElementById("stationId").value = parseInt(stationId);
    })
}

I'm out of ideas what can cause the issue, please if anyone is familiar with similar problem share your thoughts. Thank you in advance! 

function Station(stationid, line, position) {
    this.stationid = stationid;
    this.line = line;
    this.position = position
}

let stations = [];

var stationOne = new Station();
stationOne.stationid = 1;
stationOne.line = "623-1";
stationOne.position = "1300";

var stationTwo = new Station();
stationTwo.stationid = 2;
stationTwo.line = "623-1";
stationTwo.position = "2000";

var stationThree = new Station();
stationThree.stationid = 3;
stationThree.line = "623-1";
stationThree.position = "2200";

var stationFour = new Station();
stationFour.stationid = 4;
stationFour.line = "623-1";
stationFour.position = "2300";

var stationFive = new Station();
stationFive.stationid = 5;
stationFive.line = "623-1";
stationFive.position = "2400";

var stationSix = new Station();
stationSix.stationid = 6;
stationSix.line = "623-1";
stationSix.position = "2600";

var stationSeven = new Station();
stationSeven.stationid = 7;
stationSeven.line = "623-1";
stationSeven.position = "2800";

var stationEight = new Station();
stationEight.stationid = 8;
stationEight.line = "623-1";
stationEight.position = "2900";

var stationNine = new Station();
stationNine.stationid = 9;
stationNine.line = "623-1";
stationNine.position = "3000";

var stationTen = new Station();
stationTen.stationid = 10;
stationTen.line = "623-1";
stationTen.position = "3200";

var stationEleven = new Station();
stationEleven.stationid = 11;
stationEleven.line = "623-2";
stationEleven.position = "1300";

var stationTwelve = new Station();
stationTwelve.stationid = 12;
stationTwelve.line = "623-2";
stationTwelve.position = "1300";

var stationThirteen = new Station();
stationThirteen.stationid = 13;
stationThirteen.line = "623-2";
stationThirteen.position = "2000";

var stationFourteen = new Station();
stationFourteen.stationid = 14;
stationFourteen.line = "623-2";
stationFourteen.position = "2200";

var stationFifteen = new Station();
stationFifteen.stationid = 15;
stationFifteen.line = "623-2";
stationFifteen.position = "2300";

var stationSixteen = new Station();
stationSixteen.stationid = 16;
stationSixteen.line = "623-2";
stationSixteen.position = "2400";

var stationSeventeen = new Station();
stationSeventeen.stationid = 17;
stationSeventeen.line = "623-2";
stationSeventeen.position = "2600";

var stationEighteen = new Station();
stationEighteen.stationid = 18;
stationEighteen.line = "623-2";
stationEighteen.position = "2800";

var stationNineteen = new Station();
stationNineteen.stationid = 19;
stationNineteen.line = "623-2";
stationNineteen.position = "2900";

var stationTwenty = new Station();
stationTwenty.stationid = 20;
stationTwenty.line = "623-2";
stationTwenty.position = "3000";

var stationTwentyOne = new Station();
stationTwentyOne.stationid = 21;
stationTwentyOne.line = "623-2";
stationTwentyOne.position = "3200";

var stationTwentyTwo = new Station();
stationTwentyTwo.stationid = 22;
stationTwentyTwo.line = "623-3";
stationTwentyTwo.position = "1300";

var stationTwentyThree = new Station();
stationTwentyThree.stationid = 23;
stationTwentyThree.line = "623-3";
stationTwentyThree.position = "2000";

var stationTwentyFour = new Station();
stationTwentyFour.stationid = 24;
stationTwentyFour.line = "623-3";
stationTwentyFour.position = "2200";

var stationTwentyFive = new Station();
stationTwentyFive.stationid = 25;
stationTwentyFive.line = "623-3";
stationTwentyFive.position = "2300";

var stationTwentySix = new Station();
stationTwentySix.stationid = 26;
stationTwentySix.line = "623-3";
stationTwentySix.position = "2400";

var stationTwentySeven = new Station();
stationTwentySeven.stationid = 27;
stationTwentySeven.line = "623-3";
stationTwentySeven.position = "2600";

var stationTwentyEight = new Station();
stationTwentyEight.stationid = 28;
stationTwentyEight.line = "623-3";
stationTwentyEight.position = "2800";

var stationTwentyNine = new Station();
stationTwentyNine.stationid = 29;
stationTwentyNine.line = "623-3";
stationTwentyNine.position = "2900";

var stationThirty = new Station();
stationThirty.stationid = 30;
stationThirty.line = "623-3";
stationThirty.position = "3000";

var stationThirtyOne = new Station();
stationThirtyOne.stationid = 31;
stationThirtyOne.line = "623-3";
stationThirtyOne.position = "3200";

var stationThirtyTwo = new Station();
stationThirtyTwo.stationid = 32;
stationThirtyTwo.line = "626";
stationThirtyTwo.position = "1600";

var stationThirtyThree = new Station();
stationThirtyThree.stationid = 33;
stationThirtyThree.line = "626";
stationThirtyThree.position = "2000";

var stationThirtyFour = new Station();
stationThirtyFour.stationid = 34;
stationThirtyFour.line = "626";
stationThirtyFour.position = "2100";

var stationThirtyFive = new Station();
stationThirtyFive.stationid = 35;
stationThirtyFive.line = "626";
stationThirtyFive.position = "2300";

var stationThirtySix = new Station();
stationThirtySix.stationid = 36;
stationThirtySix.line = "626";
stationThirtySix.position = "2800";

var stationThirtySeven = new Station();
stationThirtySeven.stationid = 37;
stationThirtySeven.line = "626";
stationThirtySeven.position = "2900";

var stationThirtyEight = new Station();
stationThirtyEight.stationid = 38;
stationThirtyEight.line = "626";
stationThirtyEight.position = "3000";

var stationThirtyNine = new Station();
stationThirtyNine.stationid = 39;
stationThirtyNine.line = "626";
stationThirtyNine.position = "3200";

var stationFourty = new Station();
stationFourty.stationid = 40;
stationFourty.line = "628";
stationFourty.position = "1300";

var stationFourtyOne = new Station();
stationFourtyOne.stationid = 41;
stationFourtyOne.line = "628";
stationFourtyOne.position = "1400";

var stationFourtyTwo = new Station();
stationFourtyTwo.stationid = 42;
stationFourtyTwo.line = "628";
stationFourtyTwo.position = "1450";

var stationFourtyThree = new Station();
stationFourtyThree.stationid = 43;
stationFourtyThree.line = "628";
stationFourtyThree.position = "1500";

var stationFourtyFour = new Station();
stationFourtyFour.stationid = 44;
stationFourtyFour.line = "628";
stationFourtyFour.position = "2000";

var stationFourtyFive = new Station();
stationFourtyFive.stationid = 45;
stationFourtyFive.line = "628";
stationFourtyFive.position = "3000";

var stationFourtySix = new Station();
stationFourtySix.stationid = 46;
stationFourtySix.line = "628";
stationFourtySix.position = "3200";

stations.push(stationOne);
stations.push(stationTwo);
stations.push(stationThree);
stations.push(stationFour);
stations.push(stationFive);
stations.push(stationSix);
stations.push(stationSeven);
stations.push(stationEight);
stations.push(stationNine);
stations.push(stationTen);
stations.push(stationEleven);
stations.push(stationTwelve);
stations.push(stationThirteen);
stations.push(stationFourteen);
stations.push(stationFifteen);
stations.push(stationSixteen);
stations.push(stationSeventeen);
stations.push(stationEighteen);
stations.push(stationNineteen);
stations.push(stationTwenty);
stations.push(stationTwentyOne);
stations.push(stationTwentyTwo);
stations.push(stationTwentyThree);
stations.push(stationTwentyFour);
stations.push(stationTwentyFive);
stations.push(stationTwentySix);
stations.push(stationTwentySeven);
stations.push(stationTwentyEight);
stations.push(stationTwentyNine);
stations.push(stationThirty);
stations.push(stationThirtyOne);
stations.push(stationThirtyTwo);
stations.push(stationThirtyThree);
stations.push(stationThirtyFour);
stations.push(stationThirtyFive);
stations.push(stationThirtySix);
stations.push(stationThirtySeven);
stations.push(stationThirtyEight);
stations.push(stationThirtyNine);
stations.push(stationFourty);
stations.push(stationFourtyOne);
stations.push(stationFourtyTwo);
stations.push(stationFourtyThree);
stations.push(stationFourtyFour);
stations.push(stationFourtyFive);
stations.push(stationFourtySix);

let chosenPosition = document.getElementById("chosen-position");

document.getElementById('chosen-line').addEventListener('change', function () {

    switch (this.value) {
        case "622-3":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-3");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-4":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-4");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-5":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-5");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-6":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-6");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-7":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-7");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-8":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-8");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-9":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-9");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "623-1":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "623-1");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "623-2":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "623-2");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "623-3":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "623-3");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "626":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "626");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "628":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "628");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        default:
            ClearPositions();
            break;
    }
});
function CreateOption(position, stationId) {
    var newOption = document.createElement("option");
    newOption.value = stationId;
    newOption.innerText = position;
    chosenPosition.appendChild(newOption);

    newOption.addEventListener("click", function () {
        document.getElementById("stationId").value = parseInt(stationId);
    })
}
function CreateDefaultOption() {
    var newOption = document.createElement("option");
    newOption.value = "";
    newOption.innerText = "Please select position";
    newOption.disabled;
    chosenPosition.appendChild(newOption);

}
function ClearPositions() {
    document.getElementById("chosen-position").innerText = "";
}
            <form asp-controller="Quality" asp-action="Select" method="POST">
                <label>Choose a line
                    <select id="chosen-line" name="line" required>
                        <option value="" disabled selected>Select Line</option>
                        <option value="622-3">622-3</option>
                        <option value="622-4">622-4</option>
                        <option value="622-5">622-5</option>
                        <option value="626-3">622-6</option>
                        <option value="622-7">622-7</option>
                        <option value="622-8">622-8</option>
                        <option value="622-9">622-9</option>
                        <option value="623-1">623-1</option>
                        <option value="623-2">623-2</option>
                        <option value="623-3">623-3</option>
                        <option value="626">626</option>
                        <option value="628">628</option>
                    </select>
                </label>
                <label>Choose position
                    <select id="chosen-position" name="position" required>
                       <option value="" disabled selected>Select position</option>
                    </select>
                </label>
                <input type="number" id="stationId" name="stationid" />
                <button type="submit" class="btn-create" id="btn-next">Next</button>
            </form>

Upvotes: 1

Views: 190

Answers (2)

mplungjan
mplungjan

Reputation: 178285

I could not help refactoring this saving 342 lines of code ;) - more if you move the array to a separate file

Note the first select are unique "line" values from the stations

const chosenLine = document.getElementById('chosen-line');
const stationId = document.getElementById("stationId");
const chosenPosition = document.getElementById("chosen-position");

chosenPosition.addEventListener("change",function() {
  stationId.value = this.value;
})

chosenLine.addEventListener('change', function() {
  const val = this.value;
  chosenPosition.options.length = 1; // clear all but first entry
  const options = stations
    .filter((x, i) => { x.index = i; return x.line === val })
    .map(({ position, index }) => `<option value="${index}">${position}</option>`)
  chosenPosition.innerHTML += options.join("");
})

const stations = [
{ line: "623-1", position: "1300" }, 
{ line: "623-1", position: "2000" }, 
{ line: "623-1", position: "2200" }, 
{ line: "623-1", position: "2300" }, 
{ line: "623-1", position: "2400" }, 
{ line: "623-1", position: "2600" }, 
{ line: "623-1", position: "2800" }, 
{ line: "623-1", position: "2900" }, 
{ line: "623-1", position: "3000" }, 
{ line: "623-1", position: "3200" }, 
{ line: "623-2", position: "1300" }, 
{ line: "623-2", position: "1300" }, 
{ line: "623-2", position: "2000" }, 
{ line: "623-2", position: "2200" }, 
{ line: "623-2", position: "2300" }, 
{ line: "623-2", position: "2400" }, 
{ line: "623-2", position: "2600" }, 
{ line: "623-2", position: "2800" }, 
{ line: "623-2", position: "2900" }, 
{ line: "623-2", position: "3000" }, 
{ line: "623-2", position: "3200" }, 
{ line: "623-3", position: "1300" }, 
{ line: "623-3", position: "2000" }, 
{ line: "623-3", position: "2200" }, 
{ line: "623-3", position: "2300" }, 
{ line: "623-3", position: "2400" }, 
{ line: "623-3", position: "2600" }, 
{ line: "623-3", position: "2800" }, 
{ line: "623-3", position: "2900" }, 
{ line: "623-3", position: "3000" }, 
{ line: "623-3", position: "3200" }, 
{ line: "626",   position: "1600" }, 
{ line: "626",   position: "2000" }, 
{ line: "626",   position: "2100" }, 
{ line: "626",   position: "2300" }, 
{ line: "626",   position: "2800" }, 
{ line: "626",   position: "2900" }, 
{ line: "626",   position: "3000" }, 
{ line: "626",   position: "3200" }, 
{ line: "628",   position: "1300" }, 
{ line: "628",   position: "1400" }, 
{ line: "628",   position: "1450" }, 
{ line: "628",   position: "1500" }, 
{ line: "628",   position: "2000" }, 
{ line: "628",   position: "3000" }, 
{ line: "628",   position: "3200" }];

chosenLine.innerHTML += [...new Set(stations.map(({line}) => line))] // create unique items
  .map(item => `<option value="${item}">${item}</option>`)
  .join("")
<form asp-controller="Quality" asp-action="Select" method="POST">
  <label>Choose a line
    <select id="chosen-line" name="line" required>
      <option value="" disabled selected>Select Line</option>
    </select>
  </label>
  <label>Choose position
    <select id="chosen-position" name="position" required>
      <option value="" disabled selected>Select position</option>
    </select>
  </label>
  <input type="number" id="stationId" name="stationid" />
  <button type="submit" class="btn-create" id="btn-next">Next</button>
</form>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074979

Using click events on option elements in a select doesn't work reliably cross-browser. Instead, use the change event on the select itself, and use the selectedIndex, value, or selectedOptions properties to know what options have been chosen.

For instance:

chosenPosition.addEventListener("change", (event) => {
    const { value } = event.currentTarget;
    console.log(`Value chosen: ${value}`);
    if (value) {
        document.getElementById("stationId").value = parseInt(value, 10); // *** Always use the second argument
    }
});

Then remove the code adding an event handler on the option elements.

Example:

function Station(stationid, line, position) {
    this.stationid = stationid;
    this.line = line;
    this.position = position
}

let stations = [];

var stationOne = new Station();
stationOne.stationid = 1;
stationOne.line = "623-1";
stationOne.position = "1300";

var stationTwo = new Station();
stationTwo.stationid = 2;
stationTwo.line = "623-1";
stationTwo.position = "2000";

var stationThree = new Station();
stationThree.stationid = 3;
stationThree.line = "623-1";
stationThree.position = "2200";

var stationFour = new Station();
stationFour.stationid = 4;
stationFour.line = "623-1";
stationFour.position = "2300";

var stationFive = new Station();
stationFive.stationid = 5;
stationFive.line = "623-1";
stationFive.position = "2400";

var stationSix = new Station();
stationSix.stationid = 6;
stationSix.line = "623-1";
stationSix.position = "2600";

var stationSeven = new Station();
stationSeven.stationid = 7;
stationSeven.line = "623-1";
stationSeven.position = "2800";

var stationEight = new Station();
stationEight.stationid = 8;
stationEight.line = "623-1";
stationEight.position = "2900";

var stationNine = new Station();
stationNine.stationid = 9;
stationNine.line = "623-1";
stationNine.position = "3000";

var stationTen = new Station();
stationTen.stationid = 10;
stationTen.line = "623-1";
stationTen.position = "3200";

var stationEleven = new Station();
stationEleven.stationid = 11;
stationEleven.line = "623-2";
stationEleven.position = "1300";

var stationTwelve = new Station();
stationTwelve.stationid = 12;
stationTwelve.line = "623-2";
stationTwelve.position = "1300";

var stationThirteen = new Station();
stationThirteen.stationid = 13;
stationThirteen.line = "623-2";
stationThirteen.position = "2000";

var stationFourteen = new Station();
stationFourteen.stationid = 14;
stationFourteen.line = "623-2";
stationFourteen.position = "2200";

var stationFifteen = new Station();
stationFifteen.stationid = 15;
stationFifteen.line = "623-2";
stationFifteen.position = "2300";

var stationSixteen = new Station();
stationSixteen.stationid = 16;
stationSixteen.line = "623-2";
stationSixteen.position = "2400";

var stationSeventeen = new Station();
stationSeventeen.stationid = 17;
stationSeventeen.line = "623-2";
stationSeventeen.position = "2600";

var stationEighteen = new Station();
stationEighteen.stationid = 18;
stationEighteen.line = "623-2";
stationEighteen.position = "2800";

var stationNineteen = new Station();
stationNineteen.stationid = 19;
stationNineteen.line = "623-2";
stationNineteen.position = "2900";

var stationTwenty = new Station();
stationTwenty.stationid = 20;
stationTwenty.line = "623-2";
stationTwenty.position = "3000";

var stationTwentyOne = new Station();
stationTwentyOne.stationid = 21;
stationTwentyOne.line = "623-2";
stationTwentyOne.position = "3200";

var stationTwentyTwo = new Station();
stationTwentyTwo.stationid = 22;
stationTwentyTwo.line = "623-3";
stationTwentyTwo.position = "1300";

var stationTwentyThree = new Station();
stationTwentyThree.stationid = 23;
stationTwentyThree.line = "623-3";
stationTwentyThree.position = "2000";

var stationTwentyFour = new Station();
stationTwentyFour.stationid = 24;
stationTwentyFour.line = "623-3";
stationTwentyFour.position = "2200";

var stationTwentyFive = new Station();
stationTwentyFive.stationid = 25;
stationTwentyFive.line = "623-3";
stationTwentyFive.position = "2300";

var stationTwentySix = new Station();
stationTwentySix.stationid = 26;
stationTwentySix.line = "623-3";
stationTwentySix.position = "2400";

var stationTwentySeven = new Station();
stationTwentySeven.stationid = 27;
stationTwentySeven.line = "623-3";
stationTwentySeven.position = "2600";

var stationTwentyEight = new Station();
stationTwentyEight.stationid = 28;
stationTwentyEight.line = "623-3";
stationTwentyEight.position = "2800";

var stationTwentyNine = new Station();
stationTwentyNine.stationid = 29;
stationTwentyNine.line = "623-3";
stationTwentyNine.position = "2900";

var stationThirty = new Station();
stationThirty.stationid = 30;
stationThirty.line = "623-3";
stationThirty.position = "3000";

var stationThirtyOne = new Station();
stationThirtyOne.stationid = 31;
stationThirtyOne.line = "623-3";
stationThirtyOne.position = "3200";

var stationThirtyTwo = new Station();
stationThirtyTwo.stationid = 32;
stationThirtyTwo.line = "626";
stationThirtyTwo.position = "1600";

var stationThirtyThree = new Station();
stationThirtyThree.stationid = 33;
stationThirtyThree.line = "626";
stationThirtyThree.position = "2000";

var stationThirtyFour = new Station();
stationThirtyFour.stationid = 34;
stationThirtyFour.line = "626";
stationThirtyFour.position = "2100";

var stationThirtyFive = new Station();
stationThirtyFive.stationid = 35;
stationThirtyFive.line = "626";
stationThirtyFive.position = "2300";

var stationThirtySix = new Station();
stationThirtySix.stationid = 36;
stationThirtySix.line = "626";
stationThirtySix.position = "2800";

var stationThirtySeven = new Station();
stationThirtySeven.stationid = 37;
stationThirtySeven.line = "626";
stationThirtySeven.position = "2900";

var stationThirtyEight = new Station();
stationThirtyEight.stationid = 38;
stationThirtyEight.line = "626";
stationThirtyEight.position = "3000";

var stationThirtyNine = new Station();
stationThirtyNine.stationid = 39;
stationThirtyNine.line = "626";
stationThirtyNine.position = "3200";

var stationFourty = new Station();
stationFourty.stationid = 40;
stationFourty.line = "628";
stationFourty.position = "1300";

var stationFourtyOne = new Station();
stationFourtyOne.stationid = 41;
stationFourtyOne.line = "628";
stationFourtyOne.position = "1400";

var stationFourtyTwo = new Station();
stationFourtyTwo.stationid = 42;
stationFourtyTwo.line = "628";
stationFourtyTwo.position = "1450";

var stationFourtyThree = new Station();
stationFourtyThree.stationid = 43;
stationFourtyThree.line = "628";
stationFourtyThree.position = "1500";

var stationFourtyFour = new Station();
stationFourtyFour.stationid = 44;
stationFourtyFour.line = "628";
stationFourtyFour.position = "2000";

var stationFourtyFive = new Station();
stationFourtyFive.stationid = 45;
stationFourtyFive.line = "628";
stationFourtyFive.position = "3000";

var stationFourtySix = new Station();
stationFourtySix.stationid = 46;
stationFourtySix.line = "628";
stationFourtySix.position = "3200";

stations.push(stationOne);
stations.push(stationTwo);
stations.push(stationThree);
stations.push(stationFour);
stations.push(stationFive);
stations.push(stationSix);
stations.push(stationSeven);
stations.push(stationEight);
stations.push(stationNine);
stations.push(stationTen);
stations.push(stationEleven);
stations.push(stationTwelve);
stations.push(stationThirteen);
stations.push(stationFourteen);
stations.push(stationFifteen);
stations.push(stationSixteen);
stations.push(stationSeventeen);
stations.push(stationEighteen);
stations.push(stationNineteen);
stations.push(stationTwenty);
stations.push(stationTwentyOne);
stations.push(stationTwentyTwo);
stations.push(stationTwentyThree);
stations.push(stationTwentyFour);
stations.push(stationTwentyFive);
stations.push(stationTwentySix);
stations.push(stationTwentySeven);
stations.push(stationTwentyEight);
stations.push(stationTwentyNine);
stations.push(stationThirty);
stations.push(stationThirtyOne);
stations.push(stationThirtyTwo);
stations.push(stationThirtyThree);
stations.push(stationThirtyFour);
stations.push(stationThirtyFive);
stations.push(stationThirtySix);
stations.push(stationThirtySeven);
stations.push(stationThirtyEight);
stations.push(stationThirtyNine);
stations.push(stationFourty);
stations.push(stationFourtyOne);
stations.push(stationFourtyTwo);
stations.push(stationFourtyThree);
stations.push(stationFourtyFour);
stations.push(stationFourtyFive);
stations.push(stationFourtySix);

let chosenPosition = document.getElementById("chosen-position");
chosenPosition.addEventListener("change", (event) => {
    const { value } = event.currentTarget;
    console.log(`Value chosen: ${value}`);
    if (value) {
        document.getElementById("stationId").value = parseInt(value, 10); // *** Always use the second argument
    }
});

document.getElementById('chosen-line').addEventListener('change', function () {

    switch (this.value) {
        case "622-3":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-3");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-4":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-4");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-5":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-5");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-6":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-6");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-7":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-7");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-8":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-8");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "622-9":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "622-9");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "623-1":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "623-1");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "623-2":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "623-2");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "623-3":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "623-3");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "626":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "626");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        case "628":
            ClearPositions();
            CreateDefaultOption();
            var filtered = stations.filter(x => x.line == "628");
            for (var i = 0; i < filtered.length; i++) {
                CreateOption(filtered[i].position, filtered[i].stationid);
            }
            break;
        default:
            ClearPositions();
            break;
    }
});
function CreateOption(position, stationId) {
    var newOption = document.createElement("option");
    newOption.value = stationId;
    newOption.innerText = position;
    chosenPosition.appendChild(newOption);

    /*
    newOption.addEventListener("click", function () {
        document.getElementById("stationId").value = parseInt(stationId);
    })
    */
}
function CreateDefaultOption() {
    var newOption = document.createElement("option");
    newOption.value = "";
    newOption.innerText = "Please select position";
    newOption.disabled;
    chosenPosition.appendChild(newOption);

}
function ClearPositions() {
    document.getElementById("chosen-position").innerText = "";
}
<form asp-controller="Quality" asp-action="Select" method="POST">
                <label>Choose a line
                    <select id="chosen-line" name="line" required>
                        <option value="" disabled selected>Select Line</option>
                        <option value="622-3">622-3</option>
                        <option value="622-4">622-4</option>
                        <option value="622-5">622-5</option>
                        <option value="626-3">622-6</option>
                        <option value="622-7">622-7</option>
                        <option value="622-8">622-8</option>
                        <option value="622-9">622-9</option>
                        <option value="623-1">623-1</option>
                        <option value="623-2">623-2</option>
                        <option value="623-3">623-3</option>
                        <option value="626">626</option>
                        <option value="628">628</option>
                    </select>
                </label>
                <label>Choose position
                    <select id="chosen-position" name="position" required>
                       <option value="" disabled selected>Select position</option>
                    </select>
                </label>
                <input type="number" id="stationId" name="stationid" />
                <button type="submit" class="btn-create" id="btn-next">Next</button>
            </form>

I didn't do a code review or anything, but a few things stood out:

  1. You may want to use the Option constructor rather than createElement followed by assigning to value and innerText. For instance, instead of:

    var newOption = document.createElement("option");
newOption.value = stationId;
newOption.innerText = position;

    you can do:

    var newOption = new Option(position, stationId);

  2. This line of code doesn't do anything useful:

    newOption.disabled;

    If you meant to disable the "Please select position" element, you'd need:

    newOption.disabled = true;

  3. As mplungjan said, that code can be reduced to be much more readable and maintainable. For example, the 278 lines creating the stations array can be replaced with 49 lines (46 stations plus three lines of overhead) like this:

    let nextId = 1;
let stations = [
    new Station(nextId++, "623-1", "1300"),
    new Station(nextId++, "623-1", "2000"),
    new Station(nextId++, "623-1", "2200"),
    new Station(nextId++, "623-1", "2200"),
    // ...and so on...
];

    Your Station constructor already accepts the parameters and assigns to the properties (but if not, we could easily have modified it or written a wrapper function).

Upvotes: 1

Related Questions