Question

下面的新手问题，这是我的第一个HTML内容

我正在尝试在按下第一个按钮时显示页面中输入文本元素的默认参数（对象tools.IBParams的值）。默认参数来自另一个名为tools.js的js文件。这不起作用。为什么呢？

以下代码：

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

Answer 1

首先创建一个像tools.js这样的js文件，并为测试用例添加此代码

var test= 'this is your value';

然后在主html文件中添加此文件

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

然后运行此代码，它会给你提醒

this is your value

Answer 2

据我所知，您的代码中只有一个问题，那就是您尝试访问工具数据的方式。

如果使用vanilla javascript，您可以通过以下方式访问变量：

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

然后尝试将脚本放在上面的行下面。在tool.js文件中，您可以定义数组或任何所需的变量。例如。

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

您可以参考以下链接：

Can I access variables from another file?

无法在html文件中传递js参数

2 个答案: