Question

我正在使用javascript和html来填写表单。我如何编码，以便我可以在每个选项值中有一个等式？我试图实现这样的事情（如下所示），但下面的代码不起作用。任何人都可以提供帮助吗？谢谢。
长度x宽度= X.
选项值中的等式不起作用

Length(ft): <input type="text" id="Length"><br>
Width(ft): <input type="text" id="Width"><br>
<form>
<select id="grassheight">
<option value="2x+2.5">10mm</option>
<option value="2x+3.5">20mm</option>
<option value="2x+4.5">30mm</option>
</select>
</form>
<button onclick="myFunction()">Calculate</button><br>

<script>
function myFunction() {
var grassheight = document.getElementById("grassheight").value;

var Length =  document.getElementById("Length").value;
var Width =  document.getElementById("Width").value;
var area = Math.ceil(Length * Width / 0.92 * grassheight);
document.getElementById("Result").innerHTML = area;
}

Answer 1

如果您对使用eval感到高兴并且您可以控制选项值，那么您可以使用类似的东西（假设我已正确解释您的问题）：

Length(ft): <input type="text" id="Length"><br>
Width(ft): <input type="text" id="Width"><br>
<form>
<select id="grassheight">
<option value="2*x+2.5">10mm</option>
<option value="2*x+3.5">20mm</option>
<option value="2*x+4.5">30mm</option>
</select>
</form>
<button onclick="myFunction()">Calculate</button><br>

<script>
function myFunction() {
  var Length =  document.getElementById("Length").value;
  var Width =  document.getElementById("Width").value;
  var x = Length * Width;
  var grassheight = eval(document.getElementById("grassheight").value);
  var area = Math.ceil(Length * Width / 0.92 * grassheight);
  document.getElementById("Result").innerHTML = area;
}

我所做的是将选项的值变成可以通过javascript（2 * x + 2.5而不是2x + 2.5）解析的等式，然后我将x的值设置为Length * Width（就像你一样）在你的问题中描述）并评估选项值，这将（例如，如果选择第一个选项）make grassheight = 2*x+2.5 = 2*Length*Width + 2.5

如果你不想使用eval，这个question可以提供一些关于如何在没有eval的情况下评估数学表达式的想法。

Answer 2

如果你不想要这样的话，请告诉我。

＆＃13;

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        
        var Length, Width;
        function myFunction() {
            var grassheight = parseFloat(document.getElementById("grassheight").value);
            var area = Math.ceil((Length * Width / 0.92) * grassheight);
            document.getElementById("Result").innerHTML = area;
        }
        
        function UpdateOption() {
            Length = document.getElementById("Length").value != "" ? parseFloat(document.getElementById("Length").value) : 0;
            Width = document.getElementById("Width").value != "" ? parseFloat(document.getElementById("Width").value) : 0;
            $('select option')[0].value = (2 * Length * Width) + 2.5;
            $('select option')[1].value = (2 * Length * Width) + 3.5;
            $('select option')[2].value = (2 * Length * Width) + 4.5;
        }
    </script>
</head>
<body>
    Length(ft): <input type="text" id="Length" onchange="UpdateOption();"><br>
    Width(ft): <input type="text" id="Width" onchange="UpdateOption();"><br>
    <form>
        <select id="grassheight">
            <option value="2x+2.5">10mm</option>
            <option value="2x+3.5">20mm</option>
            <option value="2x+4.5">30mm</option>
        </select>
    </form>
    <div id="Result"></div>
    <button onclick="myFunction()">Calculate</button><br>

</body>
</html>

＆＃13;

Answer 3

看起来您正在尝试使用JS来将字符串作为表达式进行评估，这通常很危险，因为它容易受到注入攻击，而且性能也较差，因为浏览器必须在其上编译它-fly。

你所拥有的就是我所谓的X-Y问题：你想要的只是想到一个可以计算正确区域的数学解决方案，而不是试图评估字符串。

如果我们查看您的计算（并且您提到x指的是Length和Width的乘积，那么您的等式可以合并为一个：

area = 2 * (Length * Width) + 1.5 + (grassheight / 10)

你知道，如果你的草高为10，上面的公式将评估为：

area = 2 * (Length * Width) + 2.5

草高20，你会得到：

area = 2 * (Length * Width) + 3.5

......等等。所以你真正的问题是你无法找到描述你想要的线性关系的数学公式，而且与使用JS到eval()一个字符串几乎没什么关系。请参阅下面的概念验证：

＆＃13;

document.getElementById('calculateResult').addEventListener('click', function() {
  var grassheight = +document.getElementById('grassheight').value;
  var length = +document.getElementById("Length").value || 0;
  var width = +document.getElementById("Width").value || 0;
  var area = Math.ceil(length * width * 2 + 1.5 + (grassheight / 10));
  document.getElementById("result").innerHTML = area;
});

＆＃13;

Length(ft): <input type="text" id="Length"><br>
Width(ft): <input type="text" id="Width"><br>
<form>
<select id="grassheight">
<option value="10" selected>10mm</option>
<option value="20">20mm</option>
<option value="30">30mm</option>
</select>
</form>
<button id="calculateResult">Calculate</button>
<div id="result"></div>

＆＃13;

形式选项中的等式

3 个答案: