Question 36469 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change the href in a link by using a toggle – Jquery

I’ve created a pricing table which changes the amount by clicking on a toggle. Now I also need the value of the href attribute of the link underneath the table to be changed when clicking on the toggle. I’ve tried to figure it out with a separate JavaScript function, but can’t get it to work. It should again change back to the original href when clicking again on the toggle.

function myFunction() {
  var x = document.getElementById("prijs-small");
  if (x.innerHTML === "€18") {
    x.innerHTML = "€13";
  } else {
    x.innerHTML = "€18";
  }
};

function mailaanpassing() {
  document.getElementById("aanvragen").href = "mailto:[email protected]";
  return false;
};
#mybutton {
  width: 8rem;
  height: 3rem;
  border-radius: 100rem;
  overflow: hidden;
  display: inline-block;
}

.ster {
  display: inline-block;
  vertical-align: top;
}

.totale-button {
  text-align: center;
}

#mybutton input {
  display: none;
}

#mybutton>label {
  display: flex;
}

.side {
  width: 50%;
  padding-inline: 0.15rem;
  text-align: center;
  line-height: 3rem;
  background-color: white;
  transition: background-color, color 300ms;
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  color: #012d5d;
}

#mybutton input:not(:checked)~.left {
  background-color: #35CB8C;
  color: white;
  transition: background-color, color 300ms;
}

#mybutton input:checked~.right {
  background-color: #35CB8C;
  color: white;
  transition: background-color, color 300ms;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="totale-button">
  <div id='mybutton'>
    <label for='mybutton-checkbox'>
      <input type=checkbox id='mybutton-checkbox' onclick="myFunction(); mailaanpassing()">

      <div class='side left'>150 <i class="fa fa-user" aria-hidden="true"></i></div>
      <div class='side right'>350 <i class="fa fa-user" aria-hidden="true"></i></div>
    </label>
  </div>

  <div class="ster"> * </div>
</div>

<div id="prijs-small">€18</div>
<a href="mailto:[email protected]" id="aanvragen"><button>aanvragen</button></a>
Tags:

3

Answers


  1. 0

    As far as I understood you want to switch the href in your button. To do so you can process like this :

    HTML :

    For the HTML part just remove the call to your function mailaanpassing that change the href. You can do that in your function myFunction during the if/else block.

    <input type=checkbox id='mybutton-checkbox' onclick="myFunction()">

    Javascript :

    For the Javascript change your if/else block to this.

    if (x.innerHTML === "€18") {
    x.innerHTML = "€13";
    document.getElementById("aanvragen").href="mailto:[email protected]";
} else {
    x.innerHTML = "€18";
    document.getElementById("aanvragen").href="mailto:[email protected]";
}

    What it does is just change the href depending on what you click on your toggle.

    But for good practice I would reccomend you to not use the string of the prijs-small element, but rather check the checkbox in your DOM.

    Login or Signup to reply.
  2. 0
    1. You need to reset the attribute value on subsequent clicks.
    2. You don’t really need two functions. I’ve combined them.
    3. Don’t call JavaScript from your markup. Use event listeners. It’s better to keep your markup clean and your script intuitive.
    4. A button inside a link (anchor element) is invalid HTML. If you want a link styled as a button, do that. Don’t nest those elements.
    5. Use let and const rather than var for better scoping and safety.
    6. Use better ID values, function names, and variable names. They should be intuitive and semantic. Your future self will thank you, along with anyone else working with your code.
    7. From an application design perspective, checking a price for a specific value isn’t a good strategy. If the price changes your code breaks. Consider adding a class or using some other abstract means to check price.
    function updateEmailAddress() {
  const prijsEl = document.getElementById("prijs-small");
  const mailEl = document.getElementById("aanvragen");
  const emailAddress1 = "mailto:[email protected]";
  const emailAddress2 = "mailto:[email protected]";
  const keyPrice1 = "€13";
  const keyPrice2 = "€18";

  if (prijsEl.innerHTML === keyPrice2) {
    prijsEl.innerHTML = keyPrice1;
    mailEl.href = emailAddress2;
  } else {
    prijsEl.innerHTML = keyPrice2;
    mailEl.href = emailAddress1;
  }

  console.log(mailEl.href);
};

document.getElementById('mybutton-checkbox')
  .addEventListener('click', () => updateEmailAddress());
    #mybutton {
  width: 8rem;
  height: 3rem;
  border-radius: 100rem;
  overflow: hidden;
  display: inline-block;
}

.ster {
  display: inline-block;
  vertical-align: top;
}

.totale-button {
  text-align: center;
}

#mybutton input {
  display: none;
}

#mybutton>label {
  display: flex;
}

.side {
  width: 50%;
  padding-inline: 0.15rem;
  text-align: center;
  line-height: 3rem;
  background-color: white;
  transition: background-color, color 300ms;
  cursor: pointer;
  font-weight: 800;
  font-size: 15px;
  color: #012d5d;
}

#mybutton input:not(:checked)~.left {
  background-color: #35CB8C;
  color: white;
  transition: background-color, color 300ms;
}

#mybutton input:checked~.right {
  background-color: #35CB8C;
  color: white;
  transition: background-color, color 300ms;
}

.button-link {
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #eee;
  padding: 0.25rem 0.5rem;
  text-decoration: none;
  color: #111;
  transition: all 0.2s;
}

.button-link:hover {
  background: #333;
  color: #ddd;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="totale-button">
  <div id='mybutton'>
    <label for='mybutton-checkbox'>
      <input type=checkbox id='mybutton-checkbox'>

      <div class='side left'>150 <i class="fa fa-user" aria-hidden="true"></i></div>
      <div class='side right'>350 <i class="fa fa-user" aria-hidden="true"></i></div>
    </label>
  </div>

  <div class="ster"> * </div>
</div>

<div id="prijs-small">€18</div>
<a href="mailto:[email protected]" id="aanvragen" class="button-link">aanvragen</a>
    Login or Signup to reply.
  3. 0

    If you want an action, use a button. Links go places…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search