2个范围滑块通过下拉菜单更改值

Question

我有两个范围滑块和一个下拉菜单。下拉菜单为公制和英制，更改后，范围滑块的单位和值必须从(摄氏度和米(更改为(华氏度和英尺(。stackoverflow的一位用户帮助我使温度滑块工作，我以为我可以复制高程范围滑块的代码，但现在两者都坏了。为什么？

<p>
<label id="tempunitresult" for "temp">Temperature (<span id="tempUnitString"></span>):</label>
<input type="range" id="tempselected" class="slider">
</p>
<p>
<label id="elevunitresult" for"elev">Elevation (<span id="elevUnitString"></span>):</label> 
<input type="range" id="elevselected" class="slider">
</p>
<p>
<label for="unittype">Units:</label>
<select id="unitselected">
<option value="metric">Metric (Celsius)</option>
<option value="imperial">Imperial (Fahrenheit)</option>
</select>
</p>
<p><span id="rangeValueTemp">0</span><span id="tempUnitStringCurrent">&thinsp;</span></p>
<p><span id="rangeValueElev">0</span><span id="elevUnitStringCurrent">&thinsp;</span></p>

input,
select {
display: block;
width: 100%;
}
label {
font-weight: bold;
display: block;
}

let unitSelected = document.getElementById('unitselected');
let tempValue = document.getElementById("tempselected");
let rangeValueTemp = document.getElementById("rangeValueTemp");
let tempUnitString = document.getElementById("tempUnitString");
let tempUnitStringCurrent = document.getElementById("tempUnitStringCurrent");
let elevValue = document.getElementById("elevselected");
let rangeValueElev = document.getElementById("rangeValueElev");
let elevUnitString = document.getElementById("elevUnitString");
let elevUnitStringCurrent = document.getElementById("elevUnitStringCurrent");
// metric values
let minCelsius = -29;
let maxCelsius = 43;
let stepsCelsius = 18;
let initialValue = 7;
let minMeters = 0;
let maxMeters = 1500;
let stepsMeters = 750;
let elevinitialValue = 750;
// imperial values
let minFahrenheit = minCelsius * 9 / 5 + 32;
let maxFahrenheit = maxCelsius * 9 / 5 + 32;
let stepsFahrenheit = 32.4;
let minFeet = minMeters * 3.28084;
let maxFeet = maxMeters * 3.28084;
let stepsFeet = stepsMeters / 2;
//default values
let tempString = '°C';
tempUnitString.textContent = tempString;
tempUnitStringCurrent.textContent = tempString;
tempselected.setAttribute('min', minCelsius);
tempselected.setAttribute('max', maxCelsius);
tempselected.setAttribute('step', stepsCelsius);
tempselected.value = initialValue;
let elevString = 'm';
elevUnitString.textContent = elevString;
elevUnitStringCurrent.textContent = elevString;
elevselected.setAttribute('min', minMeters);
elevselected.setAttribute('max', maxMeters);
elevselected.setAttribute('step', stepsMeters);
elevselected.value = elevinitialValue;
let unitType = +unitselected.value;
let currentTemp = +tempselected.value;
let currentElev = +elevselected.value;
rangeValueTemp.textContent = currentTemp;
rangeValueElev.textContent = currentElev;
//update elevation values
elevValue.addEventListener('change', function(e)){
currentElev = +e.currentTarget.value;
rangeValueElev.textContent = currentElev;
}
//update temperature values
tempValue.addEventListener('change', function(e) {
currentTemp = +e.currentTarget.value;
rangeValueTemp.textContent = currentTemp;
})
//update temperature units 
unitSelected.addEventListener('change', function(e) {
currentTemp = +tempselected.value;
currentElev = +elevselected.value;
unitType = e.currentTarget.value;
if (unitType == 'imperial') {
tempString = '°F';
elevString = 'ft';
currentTemp = currentTemp * 9 / 5 + 32;
tempValue.setAttribute('step', stepsFahrenheit);
tempValue.setAttribute('min', minFahrenheit);
tempValue.setAttribute('max', maxFahrenheit);
currentElev = currentElev * 3.28084;
elevValue.setAttribute('step', stepsFeet);
elevValue.setAttribute('min', minFeet);
elevValue.setAttribute('max', maxFeet);
} else {
tempString = '°C';
elevString = 'm';
currentTemp = (currentTemp - 32) * 5 / 9;
tempValue.setAttribute('min', minCelsius);
tempValue.setAttribute('max', maxCelsius);
tempValue.setAttribute('step', stepsCelsius);
currentElev = currentElev / 3.28084;
elevValue.setAttribute('min', minMeters);
elevValue.setAttribute('max', maxMeters);
elevValue.setAttribute('step', stepsMeters);
}
currentTemp = +currentTemp.toFixed(3);
currentElev = +currentTemp.toFixed(4);
rangeValueTemp.textContent = currentTemp;
rangeValueElev.textContent = currentElev;
tempUnitString.textContent = tempString;
tempUnitStringCurrent.textContent = tempString;
elevUnitString.textContent = elevString;
elevUnitStringCurrent.textContent = elevString;
tempselected.value = currentTemp;
elevselected.value = currentElev;
});

Answer 1

// You have error at line 49 & syntax error at line 56. I have corrected & tested it. It seems working fine. Thanks
let unitSelected = document.getElementById('unitselected');
let tempValue = document.getElementById("tempselected");
let rangeValueTemp = document.getElementById("rangeValueTemp");
let tempUnitString = document.getElementById("tempUnitString");
let tempUnitStringCurrent = document.getElementById("tempUnitStringCurrent");
let elevValue = document.getElementById("elevselected");
let rangeValueElev = document.getElementById("rangeValueElev");
let elevUnitString = document.getElementById("elevUnitString");
let elevUnitStringCurrent = document.getElementById("elevUnitStringCurrent");
// metric values
let minCelsius = -29;
let maxCelsius = 43;
let stepsCelsius = 18;
let initialValue = 7;
let minMeters = 0;
let maxMeters = 1500;
let stepsMeters = 750;
let elevinitialValue = 750;
// imperial values
let minFahrenheit = minCelsius * 9 / 5 + 32;
let maxFahrenheit = maxCelsius * 9 / 5 + 32;
let stepsFahrenheit = 32.4;
let minFeet = minMeters * 3.28084;
let maxFeet = maxMeters * 3.28084;
let stepsFeet = stepsMeters / 2;
//default values
let tempString = '°C';
tempUnitString.textContent = tempString;
tempUnitStringCurrent.textContent = tempString;
tempselected.setAttribute('min', minCelsius);
tempselected.setAttribute('max', maxCelsius);
tempselected.setAttribute('step', stepsCelsius);
tempselected.value = initialValue;
let elevString = 'm';
elevUnitString.textContent = elevString;
elevUnitStringCurrent.textContent = elevString;
elevselected.setAttribute('min', minMeters);
elevselected.setAttribute('max', maxMeters);
elevselected.setAttribute('step', stepsMeters);
elevselected.value = elevinitialValue;
let unitType = +unitSelected.value; // Error: +unitselected.value
let currentTemp = +tempselected.value;
let currentElev = +elevselected.value;
rangeValueTemp.textContent = currentTemp;
rangeValueElev.textContent = currentElev;
//update elevation values
elevValue.addEventListener('change', function (e) { // Error: ('change', function(e)){
currentElev = +e.currentTarget.value;
rangeValueElev.textContent = currentElev;
})
//update temperature values
tempValue.addEventListener('change', function (e) {
currentTemp = +e.currentTarget.value;
rangeValueTemp.textContent = currentTemp;
})
//update temperature units 
unitSelected.addEventListener('change', function (e) {
currentTemp = +tempselected.value;
currentElev = +elevselected.value;
unitType = e.currentTarget.value;
if (unitType == 'imperial') {
tempString = '°F';
elevString = 'ft';
currentTemp = currentTemp * 9 / 5 + 32;
tempValue.setAttribute('step', stepsFahrenheit);
tempValue.setAttribute('min', minFahrenheit);
tempValue.setAttribute('max', maxFahrenheit);
currentElev = currentElev * 3.28084;
elevValue.setAttribute('step', stepsFeet);
elevValue.setAttribute('min', minFeet);
elevValue.setAttribute('max', maxFeet);
} else {
tempString = '°C';
elevString = 'm';
currentTemp = (currentTemp - 32) * 5 / 9;
tempValue.setAttribute('min', minCelsius);
tempValue.setAttribute('max', maxCelsius);
tempValue.setAttribute('step', stepsCelsius);
currentElev = currentElev / 3.28084;
elevValue.setAttribute('min', minMeters);
elevValue.setAttribute('max', maxMeters);
elevValue.setAttribute('step', stepsMeters);
}
currentTemp = +currentTemp.toFixed(3);
currentElev = +currentElev.toFixed(4);
rangeValueTemp.textContent = currentTemp;
rangeValueElev.textContent = currentElev;
tempUnitString.textContent = tempString;
tempUnitStringCurrent.textContent = tempString;
elevUnitString.textContent = elevString;
elevUnitStringCurrent.textContent = elevString;
tempselected.value = currentTemp;
elevselected.value = currentElev;
});