通过 HTML 更改脚本中的变量答案

【问题标题】：Changing variables in script through HTML通过 HTML 更改脚本中的变量
【发布时间】：2012-11-06 11:49:56
【问题描述】：

我的脚本中有许多变量，我希望能够通过程序的 HTML 端进行编辑。这样，如果需要对程序进行更改，脚本可以保持不变，并且可以通过 HTML 进行更改。

这是我想在 HTML 中编辑的变量：

var numberToComplete = 2;
var xAxis = 8;
var yAxis = 6;
var populationAmount = 2;

有没有办法做到这一点，如果有怎么办？

【问题讨论】：

你能再具体一点吗？这个问题对我来说不是很清楚。
HTML 不是一种可以改变客户端/服务器上任何东西的语言。
我只想在 HTML 代码中输入一个值，该值将更改脚本 @diEcho 中的变量

标签： javascript jquery html variables

【解决方案1】：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Testing Variable Capturing</title>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script>
        var numberToComplete = 0;
            var xAxis = 0;
            var yAxis = 0;
            var populationAmount = 0; 

            function setValues() {
                numberToComplete = $("#numberToComplete").val();
                xAxis = $("#xAxis").val();
                yAxis = $("#yAxis").val();
                populationAmount = $("#populationAmount").val();
            }
            function getValues() {
                $("#result").text("numberToComplete: " + numberToComplete + " | xAxis: " + xAxis + " | yAxis: " + yAxis + " | populationAmount: " + populationAmount);
            }
        </script>
    </head>
    <body>
       numberToComplete : <input id="numberToComplete" type="text"/><br/>
       xAxis: <input id="xAxis" type="text"/><br/>
       yAxis: <input id="yAxis" type="text"/><br/>
       populationAmount: <input id="populationAmount" type="text"/><br/>
       <input type="button" onclick="setValues();" value="Set Values" />
       <input type="button" onclick="getValues();" value="Get Values" /><br/>
       <div id="result"></div>
    </body>
</html>

上面的代码演示了一个简单的表单，它捕获用户输入的值并将值设置为您想要的变量。此示例使用 jQuery 引用。

【讨论】：

【解决方案2】：

HTML 本身不能做这些事情，但你可以有一个事件处理程序来完成这项工作，例如

<label for=n>Number to complete:</label>
<input id=n value=3 onchange="numberToComplete = this.value">

具体如何执行取决于上下文。

【讨论】：

我想这就是我要找的。那么我会一起把变量从脚本中取出来吗？ @Jukka K. Korpela

【解决方案3】：

您可以编写一个函数，该函数将使用eval 来执行 javascript 并设置值

【讨论】：

我会在 HTML 中放入什么？ @Chandra Sekhar Walajap

【解决方案4】：

通过这种方式，您可以从 html 表单中传递值，而无需更改脚本

<input type='text' id='numberToComplete'>
<input type='button' id='mybutton' value='mybutton'>

$("#mybutton").click(function(){

var numberToComplete = ($("#numberToComplete").val()=='')? 2:$("#numberToComplete").val() ;       
var xAxis = 8;
var yAxis = 6;
var populationAmount = 2; 
});

DEMO

【讨论】：