I am attempting to show different divs based on the button clicked, with all starting with a display style of "none" except for one default div called "atualizacoes". After clicking a button, all divs should be set to display="none", and then the specific div associated with that button should be set to display="block". However, I am facing an issue as when I click a button, the default div disappears but nothing else appears.
This is my approach:
The steps include:
snippet 1 - function used in index.html to change display styles
snippet 2 - CSS rule in stylesheet
snippet 3 - relevant parts of index.html code
<script type="text/javascript">
function replace(show) {
document.getElementById('default').style.display="none";
document.getElementById('ecra').style.display="none";
document.getElementById(show).style.display = "block";
}
</script>.ecra
{
display: none;
}<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>University Platform</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
<!-- jquery -->
<script src="assets/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Buttons on sidebar -->
<div class="row">
<h3>Options</h3>
<button type="button" class="btn btn-default botao pull-left" onclick="replace('addestudante')">Add Student</button>
</div>
<div class="row">
<button type="button" class="btn btn-default botao pull-left" onclick="replace('adduc')">Add UC</button>
</div>
<!-- Divs to switch around -->
<div class="row" id='default'>
<p>Hello World</p>
</div>
<div class="row ecra" id='addestudante'>
<button type="button" class="btn btn-default">TEST 1</button>
</div>
<div class="row ecra" id='adduc'>
<button type="button" class="btn btn-default">TEST 2</button>
</div>
</body>Why is this function not working as expected? Is there an error in my code?