Javascript change url onclick

Question

I want to modify a url according to the click on the switch button (input checkbox).

I can not change the url on click as for the price. I would like that at the second click, the url (of the button) will return this initial value (url1).

The price is correct ... On click, change is good, but url is not good :/

Thank's for your help

function show() {

var x = document.getElementById("price");
    if (x.innerHTML === "59€") {
        x.innerHTML = "89€";
    } else {
        x.innerHTML = "59€";
}

var x = document.getElementById("url1").href;
    if (x.href === "url1") {
        document.getElementById("url1").href = "url2";
    } else {
        document.getElementById("url1").href = "url";
    }
}

body{font-family:arial, 'sans serif';}
.btn{
background:#000;
padding:10px;
color:#fff;
text-decoration:none;
font-family:arial, 'sans serif';
margin:0 auto;
width:150px;
display:block;
text-align:center;
border-radius:10px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
h3{
text-align:center;
}

 <p>Click here</p>
<label class="switch">
  <input onclick="show()" type="checkbox">
  <span class="slider round"></span>
</label>


<h3 class="price-presta" id="price">59€</h3>

<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

CertainPerformance · Accepted Answer · 2020-10-03 17:23:38Z

There are 2 problems. First, here:

var x = document.getElementById("url1").href;
if (x.href === "url1") {

You put the href into the x variable, but then you try to examine the x variable's href - but strings don't have a href property. Just examine the x itself instead.

Secondly, the .href property will return the full path of the link. For example, in the Stack Snippet, it returns https://stacksnippets.net/url1. Use getAttribute instead:

function show() {
  const price = document.getElementById("price");
  price.textContent = price.textContent === "59€" ? "89€" : "59€";
  
  const anchor = document.getElementById("url1");
  anchor.href = anchor.getAttribute('href') === 'url1' ? 'url2' : 'url';
}

body {
  font-family: arial, 'sans serif';
}

.btn {
  background: #000;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  font-family: arial, 'sans serif';
  margin: 0 auto;
  width: 150px;
  display: block;
  text-align: center;
  border-radius: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

h3 {
  text-align: center;
}

<p>Click here</p>
<label class="switch">
  <input onclick="show()" type="checkbox">
  <span class="slider round"></span>
</label>


<h3 class="price-presta" id="price">59€</h3>

<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

cpt.oneeye · Accepted Answer · 2020-10-03 17:24:18Z

0

You already set the url to variable "x". So the if-condition has to be directly on the string and not the element:

//[...]
var x = document.getElementById("url1").href;
if (x === "url1") {
    document.getElementById("url1").href = "url2";
} 
//[...]

answered Oct 3, 2020 at 17:24

cpt.oneeye

6668 silver badges27 bronze badges

Comments

Romain · Accepted Answer · 2020-10-03 17:55:36Z

Perfect ! Thank you

Just ! : 'url' ? 'url2' : 'url'; VS 'url1' ? 'url2' : 'url'; :)

function show() {
  const price = document.getElementById("price");
  price.textContent = price.textContent === "59€" ? "89€" : "59€";
  
  const anchor = document.getElementById("url1");
  anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}

function show() {
  const price = document.getElementById("price");
  price.textContent = price.textContent === "59€" ? "89€" : "59€";
  
  const anchor = document.getElementById("url1");
  anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}

body {
  font-family: arial, 'sans serif';
}

.btn {
  background: #000;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  font-family: arial, 'sans serif';
  margin: 0 auto;
  width: 150px;
  display: block;
  text-align: center;
  border-radius: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

h3 {
  text-align: center;
}

<p>Click here</p>
<label class="switch">
  <input onclick="show()" type="checkbox">
  <span class="slider round"></span>
</label>


<h3 class="price-presta" id="price">59€</h3>

<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->

Collectives™ on Stack Overflow

Javascript change url onclick

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related