All files pricedropdown.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 
 
 
 
 
 
 
4x
 
20x
 
20x
 
20x
 
20x
 
 
 
 
 
1x
 
1x
 
 
1x
 
 
 
1x
3x
3x
3x
3x
 
 
 
 
 
 
// Price drop down is used on purchases search and advanced number plate search
 
// sets the minimum and maximum values along with the increment between each value
 
 
// Creates the list of price values to appear in the drop down
export function populatePriceOptions(priceSelect, min, max, step) {
  // for loop starts at minimum value and loops through to maximum value increasing by set increment step value on each iteration
  for (let price = min; price <= max; price += step) {
    // Select elements use option elements to display values
    const option = document.createElement('option');
    // sets the value attribute of each option element to the current price
    option.value = price;
    // sets the textContent attribute of each option element to a string containing £ and the current price
    option.textContent = `£${price}`;
    // appends the option as a child element to the select element called minPriceSelect
    priceSelect.appendChild(option);
  }
}
 
// This function stops the min price selected being greater than the max price selected
export function updateMaxPriceRange(minPriceSelect, maxPriceSelect, max, step) {
  minPriceSelect.addEventListener('change', () => {
    // sets selectedMin variable to a float of the current minPriceSelect or just the min (0) value
    const selectedMin = parseFloat(minPriceSelect.value) || min;
 
    // sets maxPriceSelect to the following html
    maxPriceSelect.innerHTML =
      '<option value="0" selected="selected">-</option>';
    // for loop sets the starting value to whatever the selectedMin value is then uses same system for as used previously for
    // adding further values
    for (let price = selectedMin; price <= max; price += step) {
      const option = document.createElement('option');
      option.value = price;
      option.textContent = `£${price}`;
      maxPriceSelect.appendChild(option);
    }
  });
}
 
// populatePriceOptions();