javascript - 通过 HTML 更改脚本中的变量

标签 javascript jquery html variables

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

以下是我想在 HTML 中编辑的变量:

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

有没有办法做到这一点,如果有的话怎么做?

最佳答案

<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 引用。

关于javascript - 通过 HTML 更改脚本中的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13250405/

相关文章:

html - 在 iframe 或框架中打开 Facebook 页面?

javascript - 正则表达式提取http授权 header

javascript - Google Chrome 扩展程序中的 Fire Keydown 事件

PHP session 变量在 Firefox 46.0.1+Windows 中丢失,但适用于 Firefox 46.0.1+Ubuntu 14.04

html - Fancybox slider 不工作

html - 为什么模糊滤镜在此示例中不起作用

javascript - 如何将div定位在动态ul下面

javascript - 火狐操作系统 : How to implement mp4 and m3u8 streaming

javascript - 谁能解释一下如何在 jquery 中识别匹配文本?

jquery - 覆盖 jQuery 验证 MVC4 中的默认设置