Making Rows of Boxes Clickable with Links - html

Question

So I've been trying to make these boxes clickable with links for a while now, but haven't been able to figure it out. I'd like each box to have its own link. Can anyone help me refine my code?
https://jsfiddle.net/Anonymous32794/07suq4pg/8/
<div class="wrapper">
<article class="main">
<img src="image" alt="">
<div class="text">
<b>Stuff</b>
<button>Button</button>
<p>Stuff</p></div>
</article>
<aside class="aside aside-2">
<div class="dropdown">
<button class="dropbtn">Downloads</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</aside>
<footer class="footer">
<div class="box-container">
<div class="box">Chapter 1</div>
<div class="box">Chapter 2</div>
<div class="box">Chapter 3</div>
<div class="box">Chapter 4</div>
<div class="box">Chapter 5</div>
<div class="box">Chapter 6</div>
<div class="box">Chapter 7</div>
<div class="box">Chapter 8</div>
<div class="box">Chapter 9</div>
</div>
</footer>
</div>

Answer 1

First you get all elements with class box. then you bind every element with a click Event Listener. Then you can handle the click event. In this case i print the innerHTML out.
const boxes = document.querySelectorAll('.box');
boxes.forEach((box) => {
box.addEventListener('click', function(e) {
alert('will redirect to:' + e.target.getAttribute('data-href'));
window.location = e.target.getAttribute('data-href');
});
});
.wrapper {
display: flex;
flex-flow: row wrap;
text-align: center;
}
.wrapper > * {
padding: 0px;
flex: 1 100%;
}
.footer {
}
.main {
text-align: left;
}
.aside-2 {
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 6px;
font-size: 16px;
border: none;
cursor: pointer;
top: 8px;
}
.dropdown {
position: relative;
display: inline-block;
float: center;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.box {
border: .1rem solid #cccccc;
background: #5cc80f;
color: white;
width: 25%;
}
.box-container {
align-content: center;
align-items: center;
align-self: stretch;
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-grow: 1;
font-weight: 600;
justify-content: left;
min-width: 0;
}
.box::after {
clear: both;
content: "";
}
img {
float: left;
width: 120px;
height: 171px;
padding: 10px;
border-radius: 20px;
}
#media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
#media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
<div class="wrapper">
<article class="main">
<img src="image" alt="">
<div class="text">
<b>Stuff</b>
<button>Button</button>
<p>Stuff</p></div>
</article>
<aside class="aside aside-2">
<div class="dropdown">
<button class="dropbtn">Downloads</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</aside>
<footer class="footer">
<div class="box-container">
<div class="box" data-href="http://www.google.de">Chapter 1</div>
<div class="box" data-href="http://www.bing.de">Chapter 2</div>
<div class="box">Chapter 3</div>
<div class="box">Chapter 4</div>
<div class="box">Chapter 5</div>
<div class="box">Chapter 6</div>
<div class="box">Chapter 7</div>
<div class="box">Chapter 8</div>
<div class="box">Chapter 9</div>
</div>
</footer>
</div>