I am doing a task of shwoing and hiding container1 of confused why my code does not work My task is : to click on button of show (will display container1) And button of hide (Hiding the container1)
this is the 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>You have typo it should be onclick not 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>