js获取另一个js的变量值示例代码
要在JavaScript中获取另一个JavaScript文件中的变量值，您需要使用外部JavaScript文件，并使用`<script>`标签将其包含在HTML文件中。然后，您可以在您的JavaScript代码中使用`document.getElementById()`或`document.getElementsByClassName()`等方法来获取该变量值。
以下是一个示例代码，演示如何获取外部JavaScript文件中的变量值：
HTML代码：
```html
<!DOCTYPE html> <html> <head> <title>获取外部JavaScript变量值</title> <script src="myscript.js"></script> <script src="yourscript.js"></script> </head> <body> <h1 id="result">点击按钮获取变量值</h1> <button onclick="showValue()">获取值</button> </body> </html>
```
JavaScript代码（myscript.js）：
```javascript
var myVariable = "Hello World!";
```
JavaScript代码（yourscript.js）：
```javascript
function showValue() {
var result = document.getElementById("result");
result.innerHTML = myVariable;
}```
CSS代码：
```css
body {
background-color: #f0f0f0;
}
h1 {
font-size: 24px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #008000;
color: #ffffff;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #009900;
}```
以上代码整合后的效果如下：
<!DOCTYPE html>
<html>
<head>
<title>获取外部JavaScript变量值</title>
<script src="myscript.js"></script>
<script src="yourscript.js"></script>
<style>
body {
background-color: #f0f0f0;
}
h1 {
font-size: 24px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #008000;
color: #ffffff;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #009900;
}
</style>
</head>
<body>
<h1 id="result">点击按钮获取变量值</h1>
<button onclick="showValue()">获取值</button>
<script>
var myVariable = "Hello World!";
</script>
<script>
function showValue() {
var result = document.getElementById("result");
result.innerHTML = myVariable;
}
</script>
</body>
</html>解释：
* 在HTML文件中，我们使用`<script>`标签将两个JavaScript文件包含在`<head>`标签中。第一个文件是`myscript.js`，其中包含一个名为`myVariable`的变量。第二个文件是`yourscript.js`，其中包含一个名为`showValue()`的函数，该函数将从`myscript.js`中获取`myVariable`变量的值，并将其显示在页面上的`<h1>`标签中。
* `showValue()`函数使用`document.getElementById()`方法获取ID为“result”的元素，并将其内部的HTML设置为`myVariable`变量的值。这里使用`innerHTML`属性是因为我们希望替换`<h1>`标签中的现有文本。如果该元素不存在，则将显示一个错误消息。
* CSS代码用于设置页面的背景颜色、字体大小和对齐方式以及按钮的外观效果。
效果截图如下：
