HTML5 - 根据输入选择输出元素的公式答案

【问题标题】：HTML5 - choose formula for output element based on inputHTML5 - 根据输入选择输出元素的公式
【发布时间】：2013-03-26 12:20:52
【问题描述】：

我正在设计一个简单的计算器，它有 3 个输入和一个输出。

我想知道是否可以根据使用的输入字段 (*) 更改输出元素“使用”的公式。

例如，我们有树输入：输入 A、输入 B 和输入 C

如果使用 A 和 B（且 C 为空），则输出的公式应为“A+B”
如果使用 A 和 C（且 B 为空），则输出的公式应为“A*C”
如果使用 B 和 C（且 A 为空），则输出的公式应为“B/C”

那么，如何根据使用的输入更改用于输出元素的公式？

这是一个简化的例子，希望你明白这一点:-)

根据要求，这里有一些示例代码

[code]
    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8"></meta>
    <script>
    function Test(){
    <!--alert('Formula change!');-->

    if (input_a.valueAsNumber && input_b.valueAsNumber){
    alert('Formula One');
    o.value=input_a.valueAsNumber+input_b.valueAsNumber;
    }

    if (input_b.value && input_c.value){
    alert('Formula Two');
    o.value=input_a.valueAsNumber*input_c.valueAsNumber;
    }

    if (input_a.value && input_c.value){
    alert('Formula Three');
    o.value=input_b.valueAsNumber/input_c.valueAsNumber;
    }
    }
    </script>
    <style>
    </style>
    <title>Example</title>
    </head>
    <body onload="">
    <form onsubmit="return false" oninput="
    Test();
    <!--o.value=input_a.valueAsNumber+input_b.valueAsNumber;-->
    ">

    <input name="input_a" id="input_a" type="number" step="any" value="" placeholder="Input A"></br>
    <input name="input_b" id="input_b" type="number" step="any" value="" placeholder="Input B"></br>
    <input name="input_c" id="input_c" type="number" step="any" value="" placeholder="Input C"></br>
    </br>
    <output name="o" for="a b c"></output>

    </form>
    </body>
[/code]

(*) 另一种可能性可能是有多个输出，但隐藏不相关的输出（基于输入）...但是我该怎么做呢？

【问题讨论】：

听起来很简单——你尝试过什么？
在我的 OT 中查看代码 :-)
@Alnitak ，关于评估问题的任何线索？（见下文）

标签： html formula output

【解决方案1】：

我通过使用 Eval 函数让它工作

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"></meta>
<script>
function SelectFormula(){
if (input_a.valueAsNumber && input_b.valueAsNumber){
return "input_a.valueAsNumber+input_b.valueAsNumber";
} else if (input_b.value && input_c.value){
return "input_b.valueAsNumber*input_c.valueAsNumber";
} else if (input_a.value && input_c.value){
return "input_a.valueAsNumber/input_c.valueAsNumber";
}
}
</script>
<style>
</style>
<title>Example</title>
</head>
<body onload="">
<form onsubmit="return false" oninput="
o.value=eval(SelectFormula());
">
Input A: <input name="input_a" id="input_a" type="number" step="any" value="" placeholder="Input A"></br>
Input B: <input name="input_b" id="input_b" type="number" step="any" value="" placeholder="Input B"></br>
Input C: <input name="input_c" id="input_c" type="number" step="any" value="" placeholder="Input C"></br>
</br>
Output: <output name="o" for="a b c"></output>
</form>
</body>

我宁愿不使用 Eval 函数，但直接在函数中设置 o.value=... 不起作用:-(

【讨论】：

有人知道如何避免使用 Eval 函数吗？它是否以任何方式限制输出标签？