私はJavaScriptが初めてで、それを使用していくつかの要素の表示を切り替えようとしています。1 つの要素を切り替えるスクリプトを作成しましたが、実際のサイトには複数の異なるページに複数の要素が含まれているため、多くの異なる要素で再利用できる単一の関数を作成したいと考えています。
ページの例は次のとおりです。
<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>も何も起こらず、アラート ボックスも表示されません。