如何将HTML元素分配给JavaScript全局变量？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将HTML元素分配给JavaScript全局变量？相关的知识，希望对你有一定的参考价值。
我想知道为什么我不能对html元素使用全局变量。
我正试图做这样的事情。
<script>
//I want to declare my variables here
var div1 = document.getElementById('a');
var div2 = document.getElementById('b');
var div3 = document.getElementById('c');
//And I want to use them here, inside a function.
function myFunction(){
div1.style.display = 'none';
div2.style.display = 'none';
div3.style.display = 'none';
}
</script>
不知怎的，它不让我使用我在函数外声明的变量 但如果我这样做，它就会让我这样做
<script>
function myFunction(){
var div1 = document.getElementById('a');
var div2 = document.getElementById('b');
var div3 = document.getElementById('c');
div1.style.display = 'none';
div2.style.display = 'none';
div3.style.display = 'none';
}
</script>
问题是，我有很多类似的函数，我不想每次都在我做的函数中声明变量，有没有一种方法可以将全局变量分配给HTML元素，这样我就可以实现我想要的东西，就像第一个片段一样？
谢谢
答案
你可能在代码中做错了什么，这才是正确的做法。
请看这个例子
//I want to declare my variables here
var div1 = document.getElementById('a');
var div2 = document.getElementById('b');
var div3 = document.getElementById('c');
//And I want to use them here, inside a function.
function hide() {
div1.style.display = 'none';
div2.style.display = 'none';
div3.style.display = 'none';
}
function show() {
div1.style.display = 'block';
div2.style.display = 'block';
div3.style.display = 'block';
}p {
text-align: center;
font-size: 60px;
margin-top: 0px;
}<p id="demo"></p>
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
<input type="button" value="hide" onclick="hide()">
<input type="button" value="show" onclick="show()">以上是关于如何将HTML元素分配给JavaScript全局变量？的主要内容，如果未能解决你的问题，请参考以下文章
尝试将变量值分配给结构元素。起初变量有正确的值，但结构元素有垃圾值