尝试在html中使用脚本变量

发布于 2025-01-11 11:56:51 字数 1310 浏览 0 评论 0原文

我正在尝试使用我从 ajax 更新函数中获取的 json 中的值来设置 html 中输入的默认值。该值是从 ajax 正确返回的，但我在 html 中使用它时遇到了麻烦。

我创建了一个“命名空间”来包含我的变量。如何在 html 中使用变量？请注意，“.innerHTML”和“.value”不起作用，因为（我猜测）这是一个带有最小、最大、步长的输入？如果我将 {{ myNamespace.low_pump_speed_value }} 替换为可接受的数字（800 到 1500 之间），则代码将按预期工作。

我收到以下错误：

jinja2.exceptions.UndefinedError: 'myNamespace' is undefined

这是 html 文件：

<body>
    <script>
        myNamespace = { low_pump_speed_value: 850,
                        high_pump_speed_value: 950,
                        chlorine_percent_value: 1050};
        document.write(myNamespace)
        console.log("second", myNamespace)
    </script>

    <label for="low-pump-speed-id">Low Pump Speed:</label>
    <input type="number" id="low-pump-speed-id" name="low-pump-speed-id" step="50" min="800" max="1500" required value="{{ myNamespace.low_pump_speed_value }}">
</body>
<script type="text/javascript">
    setInterval(function(){$.ajax({
        url: '/update',
        type: 'POST',
        success: function(response) {
            myNamespace.low_pump_speed_value = response["pump"]['low-speed'];
        },
        error: function(error) {
            console.log(error);
        }
    })}, 250);
</script>

原文

I am trying to set the default value of an input in html with one that I get in the json from my ajax update function. The value is getting back from the ajax correctly, but I am having a devil of a time using it in the html.

I have created a "namespace" to contain my variables. How do I use the variables in my html? Note that ".innerHTML" and ".value" don't work because (I'm guessing) this is an input with min, max, step? If I replace {{ myNamespace.low_pump_speed_value }} with an acceptable number (between 800 and 1500), the code works as expected.

I am getting the following error:

jinja2.exceptions.UndefinedError: 'myNamespace' is undefined

Here is the html file:

<body>
    <script>
        myNamespace = { low_pump_speed_value: 850,
                        high_pump_speed_value: 950,
                        chlorine_percent_value: 1050};
        document.write(myNamespace)
        console.log("second", myNamespace)
    </script>

    <label for="low-pump-speed-id">Low Pump Speed:</label>
    <input type="number" id="low-pump-speed-id" name="low-pump-speed-id" step="50" min="800" max="1500" required value="{{ myNamespace.low_pump_speed_value }}">
</body>
<script type="text/javascript">
    setInterval(function(){$.ajax({
        url: '/update',
        type: 'POST',
        success: function(response) {
            myNamespace.low_pump_speed_value = response["pump"]['low-speed'];
        },
        error: function(error) {
            console.log(error);
        }
    })}, 250);
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那片花海 2025-01-18 11:56:51

您应该使用 max..min 范围内的值，例如：

myNamespace = { low_pump_speed_value: 900,

然后，您可以将此值分配给输入字段，如下所示：

var inputField = document.getElementById("low-pump-speed-id");
inputField.value = myNamespace.low_pump_speed_value;

You should use values within the max..min range, for example:

myNamespace = { low_pump_speed_value: 900,

Then, you can assign this value to the input field as follows:

var inputField = document.getElementById("low-pump-speed-id");
inputField.value = myNamespace.low_pump_speed_value;

回复收藏 0 原文

毁梦 2025-01-18 11:56:51

感谢 (bedankt) www.admiraalit.nl，现在可以使用：
我必须相信我所做的事情是愚蠢的，因为我以为我是这样开始的，最后却陷入了困境。

<!DOCTYPE html>
<form class="form-inline" method="POST" action="{{ url_for('override_select') }}">
    <link rel="shortcut icon" href={{ url_for('static',filename='favicon.png') }} />
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/root.css') }}">
    </head>
    <body>
        <label for="low-pump-speed-id">Low Pump Speed:</label>
        <input type="number" id="low-pump-speed-id" name="low-pump-speed-id" step="50" min="800" max="1500">
        <label for="high-pump-speed-id">High Pump Speed:</label>
        <input type="number" id="high-pump-speed-id" name="high-pump-speed-id" step="50" min="800" max="1500">
        <label for="chlorine-percent-id">Chlorine Percent:</label>
        <input type="number" id="chlorine-percent-id" name="chlorine-percent-id" step="50" min="800" max="1500">
    </body>
    <script type="text/javascript">
        setInterval(function(){$.ajax({
            url: '/update',
            type: 'POST',
            success: function(response) {
                document.getElementById("low-pump-speed-id").value = response["pump"]['low-speed'];
                document.getElementById("high-pump-speed-id").value =response["pump"]['high-speed'];
                document.getElementById("chlorine-percent-id").value = response["chlorinator"]['chlorine-percent'];
            },
            error: function(error) {
                console.log(error);
            }
        })}, 2000);
    </script>
</form>

Thanks (bedankt) to www.admiraalit.nl, this is now working:
I have to believe that it was something stoopid I was doing as I thought I started out this way and just wound up in the weeds.

<!DOCTYPE html>
<form class="form-inline" method="POST" action="{{ url_for('override_select') }}">
    <link rel="shortcut icon" href={{ url_for('static',filename='favicon.png') }} />
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/root.css') }}">
    </head>
    <body>
        <label for="low-pump-speed-id">Low Pump Speed:</label>
        <input type="number" id="low-pump-speed-id" name="low-pump-speed-id" step="50" min="800" max="1500">
        <label for="high-pump-speed-id">High Pump Speed:</label>
        <input type="number" id="high-pump-speed-id" name="high-pump-speed-id" step="50" min="800" max="1500">
        <label for="chlorine-percent-id">Chlorine Percent:</label>
        <input type="number" id="chlorine-percent-id" name="chlorine-percent-id" step="50" min="800" max="1500">
    </body>
    <script type="text/javascript">
        setInterval(function(){$.ajax({
            url: '/update',
            type: 'POST',
            success: function(response) {
                document.getElementById("low-pump-speed-id").value = response["pump"]['low-speed'];
                document.getElementById("high-pump-speed-id").value =response["pump"]['high-speed'];
                document.getElementById("chlorine-percent-id").value = response["chlorinator"]['chlorine-percent'];
            },
            error: function(error) {
                console.log(error);
            }
        })}, 2000);
    </script>
</form>

回复收藏 0 原文

~没有更多了~