JavaScript 帶有計算按鈕的查找表

Question

我試圖弄清楚如何創建一個查找表來搜索百分比、溫度、海拔和水果，然后在用戶單擊“計算”按鈕時返回成本、狀態和目標。

css：

input,
select {
  display: block;
  width: 100%;
}

label {
  font-weight: bold;
  display: block;
}

html：

<!-- select unit type -->
<p>
  <label for="unittype">Units:</label>
  <select id="unitselected">
    <option value="metric">Metric </option>
    <option value="imperial">Imperial </option>
  </select>
</p>

<!-- percentage buttons -->
<p>
<table>
  <tr>
    <td colspan="2">
      <label for "percent"><b>Percentage(%):</b></label>
    </td>
  <tr>
    <td>
      <input id="per50" checked = "checked" type="radio" name="perselected" value="percent50" />
    </td>
    <td>
      <label>50 %</label>
    </td>
  </tr>
  <tr>
    <td>
      <input id="per100" type="radio" name="perselected" value="percent100" />
    </td>
    <td>
      <label>100 %</label>
    </td>
  </tr>
</table>
</p>


<!-- temperature range slider -->
<p>
  <label id="tempunitresult" for "temp">Temperature (<span id="tempUnitString"></span>):</label>
  <input type="range" id="tempselected" class="slider">
</p>
<p><span id="rangeValueTemp">0</span>&thinsp;<span id="tempUnitStringCurrent"></span></p>


<!-- elevation range slider -->
<p>
  <label id="elevunitresult" for"elev"><b>Elevation (<span id="elevUnitString"></span>):</b></label>
  <input type="range" id="elevselected" class="slider">
</p>
<p><span id="rangeValueElev">0</span><span id="elevUnitStringCurrent">&thinsp;</span></p>

<!-- fruit drop down menu -->
<p>
  <label for="fruittype"><b>Fruit:</b></label>
  <select id="fruitselected">
    <option value="none">Select Fruit</option>
    <option value="apple">Apples</option>
    <option value="orange">Oranges</option>
  </select>
</p>
<br>
<!-- calculate button -->
<p>
  <button type="button" onClick ="displayResults()" class="button" id="btnresults"><span>Calculate</span></button>
</p>

<!-- print out results -->
<p>Cost:<span id="cost"></span></p>
<p>Status:<span id="status"></span></p>
<p>Goal:<span id="goal"></span></p>

javaScript 在單位更改時更改溫度、海拔和水果（公制到英制）：

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 * 3.28084;

//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);

    let fruita = document.getElementById("fruitselected").innerHTML;
    document.getElementById("fruitselected").innerHTML = fruita.replace("Apples","Grapes");
    let fruitb = document.getElementById("fruitselected").innerHTML;
    document.getElementById("fruitselected").innerHTML = fruitb.replace("Oranges","Watermelon");

  } 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);

    let fruita = document.getElementById("fruitselected").innerHTML;
    document.getElementById("fruitselected").innerHTML = fruita.replace("Grapes","Apples");
    let fruitb = document.getElementById("fruitselected").innerHTML;
    document.getElementById("fruitselected").innerHTML = fruitb.replace("Watermelon", "Oranges");

  }

  currentTemp = +currentTemp.toFixed(3);
  currentElev = +currentElev.toFixed(0);
  rangeValueTemp.textContent = currentTemp;
  rangeValueElev.textContent = currentElev;
  tempUnitString.textContent = tempString;
  tempUnitStringCurrent.textContent = tempString;
  elevUnitString.textContent = elevString;
  elevUnitStringCurrent.textContent = elevString;
  tempselected.value = currentTemp;
  elevselected.value = currentElev;

});

javaScript 從 html 檢索值並轉換為數組？：

//fruit type
var fruit_type = new Array();
  fruit_type["none"]=0;
  fruit_type["apple"]=1;
  fruit_type["orange"]=2;

function getfruitType(){
  var fruitType = 0;
  var fruitSelected = document.getElementById('fruitselected');

  fruitType = fruit_type[fruitSelected.value];

  return fruitType;
}

//temperature//
function gettemperatureValue(){
  var temperatureValue = 0;
  var temperatureSelected = document.getElementById('tempselected');

  temperatureValue = temperatureSelected.value;

  return temperatureValue;
}

//elevation//
function getelevationValue(){
  var elevationValue = 0;
  var elevationSelected = document.getElementById('elevselected');

  elevationValue = elevationSelected.value;

  return elevationValue;
}

// percent
var per_percent = new Array();
  per_percent["percent50"]=1;
  per_percent["percent100"]=2;

function getperPercent(){
  var perPercent = 0;
  var perSelected = document.getElementsByName('perselected');

  for(i = 0; i < perSelected.length; i++){
    if(perSelected[i].checked){
      perPercent = per_percent[perSelected[i].value];
      break;
    }
  }
  return perPercent;
}

我開始嘗試輸入查找表，但范圍滑塊停止工作。 不完全確定我做錯了什么以及如何使查找表工作。

javaScript 查找表：

function displayResults(){

  var resultCost = 0;
  var resultStatus = 0;
  var resultGoal = 0;

 var tables = {
  Percentage: [50,100],
  Temperature: [-29,-11,7,25,43],
  Elevation: [0,750,1500]
  Fruit: ["Apples", "Oranges"]
 };

 var array = [
  {Percentage: 50 , Temperature: -29, Elevation: 0, Fruit: "Apples", Cost: 32, Status: "good" , Goal: "completed"},
  {Percentage: 50 , Temperature: -29, Elevation: 0, Fruit: "Oranges", Cost: 43, Status:"good" , Goal:"completed"},
  {Percentage:100 , Temperature: 43, Elevation: 1500, Fruit: "Watermelon", Cost: 100, Status: "bad", Goal: "not completed"},

 //and so on...

 ];

  for (var key in tables)
    if (tables.hasOwnProperty(key)) {
      selects[key] = form[key];
      selects[key].addEventListener("change", updateSpan);

      var values = tables[key];
      len = values.length;
      for (i = 0; i < len; i++) {
        var option = document.createElement('option');
        option.appendChild(document.createTextNode(values[i]));
        form[key].appendChild(option);
      }
    }

  len = array.length;
  for (i = 0; i < len; i++) {
    var record = array[i];

    if (typeof map[record.Fruit] === 'undefined')
        map[record.Fruit] = {};

    map[record.Percentage][record.Temperature][record.Elevation][record.Fruit] = record.Cost;
    map[record.Percentage][record.Temperature][record.Elevation][record.Fruit] = record.Status;
    map[record.Percentage][record.Temperature][record.Elevation][record.Fruit] = record.Goal;
  }

  function updateSpan() {
    var Percentage = selects.Percentage.options[selects.Percentage.selectedIndex].value;
    var Temperature = selects.Temperature.options[selects.Temperature.selectedIndex].value;
    var Elevation = selects.Elevation.options[selects.Elevation.selectedIndex].value;
    var Fruit = selects.Fruit.options[selects.Fruit.selectedIndex].value;

    if (typeof map[Fruit] !== 'undefined' && typeof map[Fruit][Percentage] !== 'undefined' && typeof map[Fruit][Percentage][Temperature] !== 'undefined' && typeof map[Fruit][Percentage][Temperature][Elevation] !== 'undefined')
        span.textContent = map[Fruit][Percentage][Temperature][Elevation];
    else
        span.textContent = "not defined: ";
}

  document.getElementById("cost").innerHTML = resultCost;
  document.getElementById("status").innerHTML = resultStatus;
  document.getElementById("goal").innerHTML = resultGoal;

}

Answer 1

同意@imvain2 ...我也不確定“問”是什么

是如何輕松地創建查找 map 4 個輸入變量（%/temp/elev/fruit）到 3 個輸出變量（成本/狀態/目標）？

如果是這樣，根據映射的簡單/復雜程度，您也許可以做類似這個非常古老的帖子： is-there-a-simple-way-to-create-a-javascript-lookup-table