如何将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()">

给TA打赏
共{{data.count}}人
人已打赏
未分类

删除除了2列以外所有列都是NA的行[重复]

2022-9-8 17:58:17

未分类

在一列中选择进入和退出

2022-9-8 17:58:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索