Question

我正在尝试从两个范围输入中获取值并获得一个（非随机的）自定义输出，例如（vmin = 15，vmax = 20，text = 99; {{1 }} = 15，vmin = 19，vmax = 7）。有更好的方法吗？

text

<input id="smin" type="range" value="10" min="1" max="20" step="1"/>
<input id="smax" type="range" value="11" min="1" max="20" step="1"/>
<h1 id="text">0</h1>

Answer 1

计算该值的逻辑是什么？更好的方法是构建一个函数，该函数接收vmin和vmax值作为参数，“做数学”并返回要在document.getElementById（“ text”）。innerHTML中使用的值。示例：

function functionThatCalculatesTheValue(v1, v2) {
   var newValue = 0;
   // do something with v1 and v2 and set a value to newValue
   return newValue;
}

var vmin = document.getElementById("smin").value; 
var vmax = document.getElementById("smax").value;
document.getElementById("text").innerHTML = functionThatCalculatesTheValue(vmin, vmax);

Answer 2

您可以指定要匹配的值以及要在数组中输出的值。

然后，您可以遍历此数组以检查范围是否匹配大小写，如果匹配，则输出相应的值。

如果添加更多条件，这将很好地扩展。

这还具有在找不到匹配项时不设置值的好处。

下面是一个示例，该示例包含一个函数execOnMatch，该函数采用[min, max, valueToOutput]数组的列表，并且在存在匹配项时使用该值进行调用。

此函数输出另一个函数，您可以使用范围的min/max值来调用：

const execOnMatch = (casesToHandle, onMatch) =>
  (vmin, vmax) => casesToHandle.forEach(([min, max, valueToOutput]) => {
    if (vmin == min && vmax == max) onMatch(valueToOutput);
  });

const text = document.getElementById('text');
const rangeMin = document.getElementById('smin');
const rangeMax = document.getElementById('smax');

const handler = execOnMatch(
  [[15, 20, 99], [15, 19, 7], [15, 15, 5], [17, 15, 8], [5, 15, 3], [7, 15, 1]],
  x => text.innerHTML = x
);

const handlerMin = x => handler(x, rangeMax.value);
const handlerMax = x => handler(rangeMin.value, x);

<input id="smin" type="range" value="15" min="1" max="20" step="1" oninput="handlerMin(this.value)"/>
<input id="smax" type="range" value="15" min="1" max="20" step="1" oninput="handlerMax(this.value)"/>
<h1 id="text">0</h1>

有没有办法从两个范围输入获取值并为方程式提供自定义值？

2 个答案: