How to change the href in a link by using a toggle-CodePudding

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 >
  <div id='mybutton'>
    <label for='mybutton-checkbox'>
      <input type=checkbox id='mybutton-checkbox' onclick="myFunction(); mailaanpassing()">

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

  <div > * </div>
</div>

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

CodePudding user response：

Don't call JavaScript from your markup. Use event listeners.
You don't really need two functions. I've combined them.
You need to reset the value on subsequent clicks.
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.
Use let and const rather than var for better scoping and safety.
Use better ID values and variable names. They should be intuitive and semantic. Your future self will thank you, along with anyone else working with your code.

function myFunction() {
  let x = document.getElementById("prijs-small");
  let y = document.getElementById("aanvragen");

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

document.getElementById('mybutton-checkbox')
  .addEventListener('click', () => myFunction());

#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 >
  <div id='mybutton'>
    <label for='mybutton-checkbox'>
      <input type=checkbox id='mybutton-checkbox'>

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

  <div > * </div>
</div>

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

CodePudding user response：

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.