I am wanting to have nine drop-down boxes but currently only have two. The problem is that only one of them are working yet the code for both of them are the same apart from the obvious changes in ID's for different parts of the HTML. When i click the first one ("mid_side_button") it works perfectly and displays the content that has been created using CSS. When i click the other button ("right_side_button"), it doesn't do anything.
Here is the relevant Javascript and HTML < div > element containing the relevant sections.
Please do not take much notice of the CSS, it is only provided for further reference.
Please reply if any further information is needed.
window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */
"use strict";
var rightdropdown = document.getElementById('right_side_dropdown_content');
var rightdropdownbuttontoggle = document.getElementById('right_side_button');
if (event.target !== rightdropdown) {
rightdropdown.style.display = 'none';
}
});
window.onload = function () {
"use strict";
var rightbutton = document.getElementById('right_side_button');
/* creating variable "midbutton" and calling the ID "mid_side_button" */
var rightdropdowncontent = document.getElementById('right_side_dropdown_content');
/* same as above */
document.onclick = function (e) { /* creating function "e" */
if (e.target === rightbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
rightdropdowncontent.style.display = 'block';
}
};
};
window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */
"use strict";
var middropdown = document.getElementById('mid_side_dropdown_content');
var middropdownbuttontoggle = document.getElementById('mid_side_button');
if (event.target !== middropdown) {
middropdown.style.display = 'none';
}
});
window.onload = function () {
"use strict";
var midbutton = document.getElementById('mid_side_button');
/* creating variable "midbutton" and calling the ID "mid_side_button" */
var middropdowncontent = document.getElementById('mid_side_dropdown_content');
/* same as above */
document.onclick = function (e) { /* creating function "e" */
if (e.target === midbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
middropdowncontent.style.display = 'block';
}
};
};.individual_left_side_links{
margin: 0px;
margin-right: 5px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
margin-bottom: 10px;
box-shadow: 2px 2px 2px #888;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
overflow: auto;
width: 300px;
}
#vehicle_3_header{
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 0px;
padding: 0px;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
width: 300px;
float: right;
border-bottom: 2px solid black;
}
.compare_sections_titles{
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 0px;
}
#right_section{
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 0px;
float: right;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
width: 300px;
margin-bottom: 10px;
box-shadow: 2px 2px 2px #888;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
overflow:auto;
}
#right_side_button{
background-color: aqua;
padding-right: 90px;
padding-left: 90px;
font-size: 16px;
border: 1px solid grey;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
box-shadow: 2px 2px 2px #888;
}
#right_side_dropdown_content{
display: none;
position:absolute;
background-color: #f9f9f9;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: 40px;
text-align: left;
}
#right_side_dropdown_content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#right_side_dropdown_content a:hover {
background-color: #f1f1f1;
}
#mid_section{
margin: 5px;
float: left;
width: 320px;
text-align: left;
padding-left: 10px;
padding-right: 10px;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
box-shadow: 1px 1px 2px 2px #888;
}
#mid_side_button{
background-color: aqua;
padding-right: 90px;
padding-left: 90px;
font-size: 16px;
border: 1px solid grey;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
box-shadow: 2px 2px 2px #888;
}
#mid_side_dropdown_content{
display: none;
position:absolute;
background-color: #f9f9f9;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: 40px;
text-align: left;
}
#mid_side_dropdown_content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#mid_dropdown_text{
color: white;
text-align:center;
}
#mid_side_dropdown_content a:hover {
background-color: #f1f1f1
}<div id="mid_container">
<header id="container_top_padder">
<li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
</header>
<article id="left_section">
<nav id="left_side_nav">
<li><a class="individual_left_side_links">Cars</a></li>
<li><a class="individual_left_side_links">Bikes</a></li>
<li><a class="individual_left_side_links">Trucks</a></li>
</nav>
</article>
<article id="mid_section">
<p>Title</p>
<p>Subtitle</p>
<p>Subtitle</p>
<p>Subtitle</p>
<button id="mid_side_button">Make</button>
<div id="mid_side_dropdown_content">
<p><a class="mid_dropdown_text" href="#">Link 1</a></p>
<p><a class="mid_dropdown_text" href="#">Link 2</a></p>
<p><a class="mid_dropdown_text" href="#">Link 3</a></p>
</div>
</article>
<header id="vehicle_3_header">
<h3 class="compare_sections_titles">Vehicle 3</h3>
</header>
<article id="right_section">
<button id="right_side_button">Make</button>
<div id="right_side_dropdown_content">
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p>
</div>
</article>
</div>
<script type="text/javascript" src="Test3Javascript.js"></script>
</body>
</html>
