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 -->

Answer 1

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 -->

Answer 2

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";
} 
//[...]

Answer 3

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 -->