我的javascript代码显示和隐藏不工作?



我正在做一个显示和隐藏container1的任务,我的代码为什么不工作我的任务是:点击显示按钮(将显示container1)隐藏按钮(隐藏container1)

这是html

function Show() {
document.getElementById('Khenchela').style.display = 'block'
}
function Hide() {
document.getElementById('Khenchela').style.display = 'none'
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="3.css">
<head>
<title>JAVA SCRIPT WEBSITE</title>
</head>
<body>
<button oneclick="Show()">Hide London</button>
<button oneclick="Hide()">Show London</button>
<div id="Khenchela" class="container 1">
<h3>Khenchela</h3>
<p>Khenchela is the Tadjalt city of Algeria </p>
</div>
<div id="Batna" class="container 2">
<h3>Batna </h3>
<p>Batna is the Tnakt city of algeria</p>
</div>
<div id="Biskra" class="container 3">
<h3>Biskra</h3>
<p>Biskra is the 'after' Tnakt city of algeria</p>
</div>
<script src="2.js" type="text/javascript"></script>
</body>
</html>

你打错了,应该是onclick,而不是oneclick

function Show() {
document.getElementById('Khenchela').style.display = 'block'
}
function Hide() {
document.getElementById('Khenchela').style.display = 'none'
}
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="3.css">
<head>
<title>JAVA SCRIPT WEBSITE</title>
</head>
<body>
<button onclick="Hide()">Hide London</button>
<button onclick="Show()">Show London</button>
<div id="Khenchela" class="container 1">
<h3>Khenchela</h3>
<p>Khenchela is the Tadjalt city of Algeria </p>
</div>
<div id="Batna" class="container 2">
<h3>Batna </h3>
<p>Batna is the Tnakt city of algeria</p>
</div>
<div id="Biskra" class="container 3">
<h3>Biskra</h3>
<p>Biskra is the 'after' Tnakt city of algeria</p>
</div>
<script src="2.js" type="text/javascript"></script>
</body>
</html>