Making Rows of Boxes Clickable with Links-CodePudding

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">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </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>

CodePudding user response：

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">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </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>