Generate url path when a div is clicked - Pure JS

Question

I'm learning by myself and for now i'm actually stuck.

I want to change the URL of my button depending on which card is selected. The goal is to redirect the user in a config page dedicated to the desired product.

Do I identify them by Ids? Values? Another thing i missed? Do I stock each card's url in the JS file? Or is there a smarter way to do this?

Maybe I should clean my html before getting into this to get something cleaner?

console.log('connected');

const cardBody = document.querySelectorAll('.product_card');
const selectProduct = document.querySelectorAll('.card-body');
const btn = document.querySelector('button');

clickedProduct();

function clickedProduct() {
  for (var i = 0; i < selectProduct.length; i++) {
    selectProduct[i].addEventListener("click", function() {
      (document.querySelector('.active')) ? document.querySelector('.active').classList.remove('active'): '';
      this.classList.add('active');
      btn.classList.remove('disabled');
    });
  };
};

body {
  height: 100vh;
  background: #E0EAFC;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #CFDEF3 100%, #E0EAFC 0%);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container-big {
  height: 100vh;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container {
  margin-bottom: 0.5vh;
}

.card {
  border-radius: 1.2vh;
}

.row,
.col-sm-6 {
  margin: inherit;
  padding: inherit;
}

.col-left {
  padding-left: 15px;
  padding-right: 7.5px;
}

.col-right {
  padding-right: 15px;
  padding-left: 7.5px;
}

.col-top {
  padding-top: 15px;
  padding-bottom: 7.5px;
}

.col-bot {
  padding-bottom: 15px;
  padding-top: 7.5px;
}

.product_card:hover {
  border: 1px solid #007bff;
}

.card-body:hover {
  color: #007bff;
}

.active {
  border: 1px solid #007bff;
  color: #007bff;
  border-radius: 1.2vh;
  ;
}

.btn-config {
  align-self: flex-end;
  margin-right: 15px;
  margin-bottom: 15px;
}

ul li {
  list-style: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!--- Font Awesome CDN -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

  <!--- CSS GG ICONS -->
  <link href='https://css.gg/css' rel='stylesheet'>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/product.css">

  <!-- Titre -->
  <title>Choose a product</title>
</head>

<body>

  <div class="container-big">

    <div class="container">
      <div class="card card-box">
        <div class="card-header">Select a product</div>
        <div class="row">
          <div class="col-sm-6 col-left col-top">
            <div class="card product_card">
              <div value="p1" class="card-body">
                <h5 class="card-title">Product 1</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-right col-top">
            <div class="card product_card">
              <div value="p2" class="card-body">
                <h5 class="card-title">Product 2</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 col-left col-bot">
            <div class="card product_card">
              <div value="p3" class="card-body">
                <h5 class="card-title">Product 3</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-right col-bot">
            <div class="card product_card">
              <div value="p4" class="card-body">
                <h5 class="card-title">Product 4</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-config" class="d-inline-block" data-toggle="popover" data-placement="left" data-content="testgsdfzefz" data-trigger="hover">
          <button class="btn btn-outline-primary disabled" style="pointer-events: none;">
            <a href="DYNAMIC-CHANGE">Config</a>
        </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <script type="text/javascript" src="js/sproduct.js"></script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

Tony Drummond · Accepted Answer · 2020-09-23T00:05:12.107

Check out this article:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Create a new data attribute for each card and enter in your designated URL.

Create an onClick function and assign to each card. When the card is clicked, trigger a function. Use the "this" keyword to access the data attribute of the specific card that was clicked. Change the URL of the button based this.

This way is simple and doesn't require a lengthy switch statement.

Revised JavaScript:

function clickedProduct() {
for (var i = 0; i < selectProduct.length; i++) {
    selectProduct[i].addEventListener("click", function () {
        document.querySelector(".active")
            ? document.querySelector(".active").classList.remove("active")
            : "";
        btn.setAttribute("href", this.dataset.link);
        this.classList.add("active");
        btn.classList.remove("disabled");
    });
}

}

Revised HTML Sample:

<div class="card product_card">
                            <div
                                value="p1"
                                class="card-body"
                                data-link="http://test.com/a"
                            >
                                <h5 class="card-title">Product 1</h5>
                                <p class="card-text">
                                    With supporting text below as a natural
                                    lead-in to additional content.
                                </p>
                            </div>
                        </div>

maybe this will help you: https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link#:~:text=The%20plain%20HTML%20way%20is,URL%20in%20the%20action%20attribute.&text=If%20necessary%2C%20set%20CSS%20display,type%3D%22submit%22%3E%20. — Tony Drummond, Sep 23 '20 at 09:13
Hi Tony. Never took the time to say thank you. It worked like a charm. But there's a line I don't understand, which is "document.querySelector(".active") ? document.querySelector(".active").classList.remove("active") : "";". What does "?" do? — Veermo, Nov 14 '20 at 16:30
@Veermo That is called the ternary operator. It's the same as an if-else statement, but more concise. ? : — Tony Drummond, Nov 14 '20 at 21:11

Generate url path when a div is clicked - Pure JS

1 Answers1