not able to pass js parameters in html file

Question

Newbie question below, this is my first html thing

I'm trying to show the default parameters (values of the object tools.IBParams) of input text elements in the page when the first button is pressed. The default parameters come from another js file named tools.js. This is not working. Why?

Code below:

<!DOCTYPE html>
<html>
    <head>
        <title>Change parameters</title>
    </head>
    <body>
      <div align="center">
        <form action="/change_params.html" method="get">
          <fieldset>
            <legend>Enter the parameters values to modify and press Submit Data:</legend>
            <p>
            <button onclick="seeValues()">SHOW ACTUAL VALUES</button>
            </p>

            <p>
            Primary refrigerant specific Heat (SI) <br>
            <input type="text" id="spec_heat" value="">
            </p>

            <p>
            Primary refrigerant density (SI) <br>
            <input type="text" id="density" value="">
            </p>

            <p>
            Charge level limit (mm) <br>
            <input type="text" id="chargeLevLim" value="">
            </p>

            <p>
            Discharge level limit (mm) <br>
            <input type="text" id="dischargeLevLim" value="">
            </p>

            <p>
            Charge temperature limit (degC) <br>
            <input type="text" id="chargeTempLim" value="">
            </p>

            <p>
            Discharge temperature limit (degC) <br>
            <input type="text" id="dischargeTempLim" value="">
            </p>

            <p>
            Derivative limit (mm/s) <br>
            <input type="text" id="derivLim" value="">
            </p>

            <p>
            Power high limit (SI) <br>
            <input type="text" id="powerHighLim" value="">
            </p>

            <p>
            Power low limit (SI) <br>
            <input type="text" id="powerLowLim" value="">
            </p>

            <p>
            Flow high limit (lpm) <br>
            <input type="text" id="flowHighLim" value="">
            </p>

            <p>
            Flow low limit (lpm) <br>
            <input type="text" id="flowLowLim" value="">
            </p>

            <p>
            Time interval for data retrieval (secs) <br>
            <input type="text" id="sendPeriod" value="">
            </p>

            <input type="submit" value="Submit Data" onclick="window.location.reload()">
          </fieldset>
        </form>
      </div>

      <script>
      var tools = require('./tools');
      function seeValues () {
        for (key in tools.IBParams) {
          document.getElementById(key).value = tools.IBParams[key];
          console.log("\n\nPASSED HERE\n\n");
        }
      }
      </script>
    </body>
</html>

Could you point me in the right direction? first time I do such thing with html/javascript — arocha, Jul 27 '17 at 11:17

Shafiqul Islam · Answer 1 · 2017-07-27T11:47:11.520

first create a js file like tools.js and add this code for test case

var test= 'this is your value';

then add this file in your main html file

<form action="/change_params.html" method="get">
    <fieldset>
        <legend>Enter the parameters values to modify and press Submit Data:</legend>
        <p>
            <button onclick="seeValues()">SHOW ACTUAL VALUES</button>
        </p>

        <p>
            Primary refrigerant specific Heat (SI) <br>
            <input type="text" id="spec_heat" value="">
        </p>

        <p>
            Primary refrigerant density (SI) <br>
            <input type="text" id="density" value="">
        </p>

        <p>
            Charge level limit (mm) <br>
            <input type="text" id="chargeLevLim" value="">
        </p>

        <p>
            Discharge level limit (mm) <br>
            <input type="text" id="dischargeLevLim" value="">
        </p>

        <p>
            Charge temperature limit (degC) <br>
            <input type="text" id="chargeTempLim" value="">
        </p>

        <p>
            Discharge temperature limit (degC) <br>
            <input type="text" id="dischargeTempLim" value="">
        </p>

        <p>
            Derivative limit (mm/s) <br>
            <input type="text" id="derivLim" value="">
        </p>

        <p>
            Power high limit (SI) <br>
            <input type="text" id="powerHighLim" value="">
        </p>

        <p>
            Power low limit (SI) <br>
            <input type="text" id="powerLowLim" value="">
        </p>

        <p>
            Flow high limit (lpm) <br>
            <input type="text" id="flowHighLim" value="">
        </p>

        <p>
            Flow low limit (lpm) <br>
            <input type="text" id="flowLowLim" value="">
        </p>

        <p>
            Time interval for data retrieval (secs) <br>
            <input type="text" id="sendPeriod" value="">
        </p>

        <input type="submit" value="Submit Data" onclick="window.location.reload()">
    </fieldset>
</form>
<script>
    alert(test)
</script>

then run this code, it will give you alert

this is your value

thank you for your time but this is not working. it loads the `tools.js` file and I dont want that. I just want to access values of parameters in `tools.js`. — arocha, Jul 27 '17 at 11:28
I checked it now and it is not working. The `test` variable in the `.html `script is not defined nor is `tools.js` required/imported/called — arocha, Jul 27 '17 at 13:43
i have tested it my local and everything working fine, give your try code , i will check which problem — Shafiqul Islam, Jul 27 '17 at 13:55

score 0 · Answer 2 · answered Jul 27 '17 at 11:38

According to me, there is only one issue in your code and that is the way you are trying to access the tools data.

In case of vanilla javascript you access the variables in this way :

<script type="text/javascript" src="tool.js">

And then try to place your script below the above line. In tool.js file you can define your array or any variable that is required. For eg.

<script>
    console.log(your_variable_defined_in_tools.js);
<script>

You can refer to the below link :

Can I access variables from another file?

not able to pass js parameters in html file

2 Answers2