我是 javascript 新手，我正在尝试使用它来切换多个元素的显示。我编写了一个脚本来切换单个元素，但我的实际站点包含多个不同页面上的多个元素，因此我想编写一个可以在许多不同元素上重用的函数。
一个示例页面可能是：
<html>
<head>
<title>Some | Page</title>
</head>
<body>
<h1 id="pepper" onclick="changeDisplay('greendiv')">Click Here</h1>
<div id="greendiv" style="height:200px; width:200px"></div>
<script type="text/javascript">
function changeDisplay('id') {
var styleState = document.getElementById('id');
var divState = document.getComputedStyle('id').display;
if (divState == 'none') {
styleState.style.display = 'block';
} else if (divState == 'block') {
styleState.style.display = 'none';
} else {
alert("Error");
}
}
</script>
</body>
</html>
仅在实际站点上，我引用了包含<head>标记中代码的外部脚本文件，因此我可以在许多页面上使用相同的脚本。如果从代码中看不出来，目的是让我能够单击<h1>标签以使<div>消失并重新出现。我不知道 jQuery，虽然我最近有一本关于它的书，但我还没有时间开始阅读，但我敢打赌它会让它变得简单得多。
我想这是非常简单的事情，总是让我失望的都是非常简单的事情......
如果有人可以解释我的代码中的错误，我将不胜感激。
哎呀，忽略了实际问题：代码没有做任何事情。当我单击该<h1>元素时，什么也没有发生，甚至没有警报框。