为什么我的onclick事件不起作用？

Question

<script>
function clear()
   {
      document.getElementById('Div1').style.display = 'block'; 
      document.getElementById('Div2').style.display = 'none';

   }
</script>

<div id="Div1">
 <p>hi</p> 
</div>
<div id="Div2">
  <p>bye</p>
</div>

<button type="button" onclick="return clear()" id="Refresh">

单击刷新按钮时,我需要显示"hi",但我的脚本功能不起作用.我试图隐藏Div2和展示Div1,但没有任何反应.

Answer 1

有一个旧的已弃用的功能,document.clear您似乎与之发生冲突.在当前规范这个定义为:

clear(),captureEvents()和releaseEvents()方法必须什么都不做.

clear2例如,如果你使用它,它按预期工作.

更好,更现代的方法是在HTML内容之后移动脚本块,并使用事件侦听器连接到click事件,这样您甚至不需要函数名称:

<div id="Div1">
  <p>hi</p> 
</div>
<div id="Div2">
  <p>bye</p>
</div>
    
<button type="button" id="Refresh">Click</button>

<script>
    document.getElementById('Refresh').addEventListener('click', function() {
        document.getElementById('Div1').style.display = 'block'; 
        document.getElementById('Div2').style.display = 'none';
    });
</script>

如果不是很明显,我们将脚本块放在HTML内容之后,这样当脚本在页面加载期间运行时,getElementById('Refresh')就能找到<button>.如果脚本块位于顶部,则当代码运行时,该按钮将不存在于页面中,并且无法找到它.