为什么我不能从另一个包含 HTML 元素的全局变量初始化一个全局变量

Question

index.html 文件

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="1script.js" defer></script>
<title>Document</title>
</head>

<body>
  <form id="form1" name="userInputForm"> 
   <label for="moq">MOQ:</label><br>
   <input type="number" id="moq" name="moq" onfocusout=""><br>
<br>

<div id="calculate"><input type="button" name="button" style="width: 8rem; height: 2rem;" value="Calulate"  onClick="priceResults()"></div>

</form>
</body>
</html>

scripts.js 文件

var userInputFormm = document.getElementById("form1");
//var whatMoq = userInputFormm.moq.value;

 function priceResults(){
   alert(userInputFormm.moq.value);
    }

您可以看到这段代码运行完美，如下所示。

但是当我将

userInputFormm.moq.value

分配给变量

whatMoq

时没有结果，因为我相信

whatMoq

无法访问

userInputForm

。如下所示，在我的 scripts.js 和结果中

但是如果我在函数

whatMoq

中创建

priceResults()

变量，它的工作原理如下

我想为同一组变量创建不同的函数。但是这个问题让我将同一组变量初始化为我创建的每个函数的局部变量，这很累人，因为在我的项目中，我有相当多的变量，我的代码看起来很多。

它没有访问

whatMoq

变量来添加数字。

但是如果我将

whatMoq

变量设置为本地变量，它就可以完美地工作。

所以如果我想用这些

whatMoq

变量创建多个函数，那么我每次都必须将它们初始化为局部变量。

真的只有这样吗？

Answer 1

你是：

将输入的值复制到
```
whatMoq
```
。这是一个空字符串，因为您已经在第 2 步之前完成了它。
键入输入，将其值从空字符串更改为您键入的任何内容。
调用
```
priceResults
```
函数
提醒
```
whatMoq
```

whatMoq

是复制时值的copy，而不是当前值的reference。

你需要注意线性时间的流逝和事情发生的顺序。

Answer 2

您在的帮助下添加的 javascript (script.js) 文件仅在页面加载时执行一次。

那时你所做的是

在变量userInputFormm中保存了id为form1的元素的引用。
使用 whatMoq 创建变量并赋值 userInputFormm.moq.value;.
但最初您的 userInputForm 表单对象具有没有初始值的最小起订量输入字段。（即“”作为输入元素，类型为文本）。

所以当 js 文件被编译和运行时，你有引用该表单的变量和带有 whatMoq 的变量，初始值为空字符串（“”）。

但是当您在输入字段中键入内容时。 userInputFormm 对象的 moq 元素值属性在内部更新。

当你点击 calculate priceResults 函数时，

在第一种情况下，您有 userInputFormm 对象的引用，该对象已在内部更新了值。因此，当您发出警报时，您将看到每个输入的值。
但在第二种情况下，您不会在任何地方更新 whatMoq 值，并且 js 文件不会重新运行，这就是为什么您将值作为初始值，即“”，它在屏幕上没有显示任何内容，因为它是空的。

要让它发挥作用，您可以这样做。

脚本.js

var userInputFormm = document.getElementById("form1");
var whatMoq = userInputFormm.moq.value;

function handleMoqChange(e){
    whatMoq = e.target.value;
}

 function priceResults(){
  //alert(userInputFormm.moq.value);
  alert(whatMoq)
}

index.html

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="1script.js" defer></script>
<title>Document</title>
</head>

<body>
  <form id="form1" name="userInputForm"> 
   <label for="moq">MOQ:</label><br>
   <input onChange="handleMoqChange(event)" type="number" id="moq" name="moq" onfocusout=""><br>
<br>

<div id="calculate">
<input type="button" name="button" style="width: 8rem; height: 2rem;" value="Calulate"  onClick="priceResults()">
</div>

</form>
</body>
</html>

为什么我不能从另一个包含 HTML 元素的全局变量初始化一个全局变量

问题描述投票：0回答：2

2个回答

最新问题

为什么我不能从另一个包含 HTML 元素的全局变量初始化一个全局变量

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2