trying to use a script variable in html-CodePudding

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>

CodePudding user response：

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;

CodePudding user response：

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  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>