Develop Reference

Javascript change url onclick

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

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

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

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

Toggle Switch to disable and enable Links

In the code below, I have coded a switch that disables and enables my links using CSS.
The problem is that my switch is not changing its appearance. It's doing its job (the JavaScript functionality is working), but the appearance isn't. I don't have much experience with
HTML Button:
<label class="switch" isValue="0">
<div class="slider round">
</div>
</label>
CSS:
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
background-color: #2196F3;
}
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
transform: translateX(26px);
}
Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.dim.disabled {
pointer-events: none;
background-color: grey;
}
JavaScript:
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".dim").addClass("disabled");
}
});
I know there is something wrong with this because it is of the input type checkbox.
Thank you for any help you can provide.

Okay, ignoring the proposed code that is too vague, here's how a jQuery class toggle works:
$(".switch").on('click', function () {
$(this)
.toggleClass('disabled')
.data('status', ($(this).hasClass("disabled")? '0':'1'));
console.clear();
console.log('data-status value is :', $(this).data('status') );
});
.switch > span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled > span {
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div>

Using just CSS, incase you wanted to go that route. Figured it might be useful since you are saying the Javascript works but the appearance will not change.
Basic switch
/** Format Example Body **/
body {
margin: 0;
padding: 0;
background: #f0f0f0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #fff;
}
.components {
padding: 20px;
}
.components .content {
margin-bottom: 20px;
}
.default {
margin: 0 5px;
}
.switch {
display: inline-block;
}
.switch input {
display: none;
}
.switch small {
display: inline-block;
width: 100px;
height: 18px;
background: #3a3a3a;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.switch small:after {
content: "No";
position: absolute;
color: #fff;
font-size: 11px;
font-weight: 600;
width: 100%;
text-align: right;
padding: 0 6px;
box-sizing: border-box;
line-height: 18px;
}
.switch small:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
transition: .3s;
box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}
.switch input:checked~small {
background: #3fc55c;
transition: .3s;
}
.switch input:checked~small:before {
transform: translate(25px, 0px);
transition: .3s;
}
.switch input:checked~small:after {
content: "Yes";
text-align: left;
}
<div class="container">
<div class="components">
<div class="content">
<label class="switch default">
<input type="checkbox">
<small></small>
</label>
</div>
</div>
</div>

I think you just need to have a specific name of a class for an enabled link or disabled link
style
.link_enabled {
/* style for enabled link */
}
.link_disabled {
/* style for disabled link */
}
script
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".switch").removeClass("link_enabled").addClass("link_disabled");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".switch").removeClass("link_disabled").addClass("link_enabled");
$(".dim").addClass("disabled ");
}
});

For the record, please note that it is simpler in JS (es6).
And because the subject only mentions javascript (not jQuery) on tag list.
document.querySelector('.switch').onclick = function(e) {
this.dataset.status = this.classList.toggle('disabled')?'0':'1';
console.clear();
console.log('data-status value is :', this.dataset.status );
}
.switch>span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled>span {
background-color: grey;
}
<div class="switch" data-status="1" ><span></span></div>

Toggle button animation

I have a toggle button to switch the website background color from black to white (and vice versa). It works ok, but I want the slider to move slowly (in 1 second, not instantly) when I click on it. The code:
var change = function() {
var backgr = document.body,
slider = document.getElementById('slider');
if (backgr.style.backgroundColor == 'white') {
backgr.style.backgroundColor = 'black';
slider.style.float = 'right';
} else {
backgr.style.backgroundColor = 'white';
slider.style.float = 'left';
}
}
body {
background-color: black;
}
#toggle {
width: 30px;
height: 16px;
background-color: orange;
padding: 0;
border: none;
border-radius: 16px;
}
#slider {
width: 14px;
height: 14px;
background-color: white;
margin: 1px;
border-radius: 50%;
float: right;
}
<button id='toggle' onclick="change()">
<span id='slider'></span>
</button>

Not sure if you have to animate the background-color or the button so I have animated both with a CSS transition, so keep just what you need.
For the button I've simply changed the margin-right (via calc()) keeping the float: right (which it can't be animated)
Also the JS part is simplified: toggling a class on the body element is enough and you can keep off your style from Javascript so as a result your code is more mantainable.
var body = document.body;
var change = function() {
body.classList.toggle('active');
}
body {
background-color: black;
transition: background-color 1s;
}
body.active {
background-color: white;
}
#toggle {
width: 30px;
height: 16px;
background-color: orange;
padding: 0;
border: none;
border-radius: 16px;
}
#slider {
width: 14px;
height: 14px;
background-color: white;
margin: 1px;
transition: margin 1s;
border-radius: 50%;
float: right;
}
.active #slider {
margin-right: calc(100% - 15px);
}
<button id='toggle' onclick="change()">
<span id='slider'></span>
</button>

Rather than using a button, I'd reskin a checkbox like this. This is handy as it keeps track of its own boolean value.
Then based on whether or not it's checked you can do whatever.
Below I've used transform and transition to animate the sliding you can see this in the CSS.
function toggleChange(e) {
let bodyStyle = document.querySelector('body').style;
if (e.target.checked) {
bodyStyle.background = "#000";
} else {
bodyStyle.background = "#FFF";
}
}
.switch[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 30px;
height: 16px;
background-color: orange;
border-radius: 16px;
}
.switch[type=checkbox]::after {
content: '';
position: absolute;
background: #FFF;
transition: all .2s ease-in-out;
border-radius: 7px;
width: 14px;
height: 14px;
margin: 1px;
}
.switch[type=checkbox]:checked::after {
transform: translateX(14px);
}
<input type="checkbox" onchange="toggleChange(event)" class="switch" />
I hope this is helpful.

Use transition: left 1000ms ease;
and position: relative;
Then change the left property in the script instead of changing float:
var change = function() {
var backgr = document.body,
slider = document.getElementById('slider');
if (backgr.style.backgroundColor == 'white') {
backgr.style.backgroundColor = 'black';
slider.style.left = 0; // NEW LINE
} else {
backgr.style.backgroundColor = 'white';
slider.style.left = "15px"; // NEW LINE
}
}
body {
background-color: black;
}
#toggle {
width: 30px;
height: 16px;
background-color: orange;
padding: 0;
border: none;
border-radius: 16px;
}
#slider {
width: 14px;
height: 14px;
background-color: white;
margin: 1px;
border-radius: 50%;
float: left; /* NEW LINE */
position: relative; /* NEW LINE */
transition: left 1000ms ease; /* NEW LINE */
left: 0; /* NEW LINE */
}
<button id='toggle' onclick="change()">
<span id='slider'></span>
</button>

Instead of float, I think you should use css that can by used with transition. if you place your sldier with a position for example, you can add a transition on the position with a 1sec duration and it will works as you want

My function runs only once

I want my button to make text in textarea cut to the clipboard and
the button rotates simultaneously each time I click it. I got it to
work, however it only rotates once, next time I click it, it'll cut
the text but button will not rotate.
HTML
my button and textarea
<div class="box-2-wrap">
<textarea class="out-put"></textarea>
<button type="button" id="copyEmailsButton" onclick="copyEmails()">Copy Emails</button>
</div>
CSS
my stylesheet
.box-2-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
border: 0px solid #333;
}
.box-2-wrap textarea {
flex:1;
padding: 4%;
overflow-y: auto;
background-color: #333;
color: gold;
max-width: 100%;
min-width: 100%;
font-size: 110%;
border: none;
border-radius: 8px;
}
.box-2-wrap button {
align-items: flex-end;
justify-content: center;
padding: 10px 2%;
width: 50%;
margin: 6% auto;
background-color: #178E44;
color: white;
font-size: 120%;
border: none;
border-radius: 4px;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
JS
my JavaScript
function unSelectAll(){
var output = document.getElementsByClassName("out-put")[0];
output.innerHTML = "";
}
}
function copyEmails(){
var output = document.getElementsByClassName("out-put")[0];
output.select();
document.execCommand('copy');
unSelectAll();
var copyEmailsButton = document.getElementById("copyEmailsButton");
if (copyEmailsButton.style.animation !== "rotate 1s") {
copyEmailsButton.style.animation = "rotate 1s";
}else{
copyEmailsButton.style.animation = "none";
}
}

In the if-else block in copyEmails you specify, that the button will rotate for one second, if the animation-style isn't set "to rotate 1s". But if it is, it will just set the animation-style to none.
If you click on the button a third time, you will notife, that it will rotate again. This is because with the 2nd click, you have set the animation Style to none again.
This means, your Button will switch and rotate every 2nd click!
To let the button rotate everytime you click, change the if-else block to:
copyEmailsButton.style.animation = "rotate 1s";
setTimeout(function() {
copyEmailsButton.style.animation = "none"
}, 1000);
This sets the animation style to none again after the animation is finished, every time you click the button.

1 there is an error in your unselctAll function, one extra close } should be removed
2 reset the button style before next click, as in this example below
function unSelectAll(){
var output = document.getElementsByClassName("out-put")[0];
output.innerHTML = "";
}
function copyEmails(){
var output = document.getElementsByClassName("out-put")[0];
output.select();
document.execCommand('copy');
unSelectAll();
var copyEmailsButton = document.getElementById("copyEmailsButton");
if (copyEmailsButton.style.animation !== "rotate 1s") {
copyEmailsButton.style.animation = "rotate 1s";
}else{
copyEmailsButton.style.animation = "none";
}
}
.box-2-wrap {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
border: 0px solid #333;
}
.box-2-wrap textarea {
flex:1;
padding: 4%;
overflow-y: auto;
background-color: #333;
color: gold;
max-width: 100%;
min-width: 100%;
font-size: 110%;
border: none;
border-radius: 8px;
}
.box-2-wrap button {
align-items: flex-end;
justify-content: center;
padding: 10px 2%;
width: 50%;
margin: 6% auto;
background-color: #178E44;
color: white;
font-size: 120%;
border: none;
border-radius: 4px;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<textarea class="out-put" onmouseover="copyEmailsButton.style.animation = 'none';" placeholder="always click here before clicking the button"></textarea>
<button type="button" id="copyEmailsButton" onclick="copyEmails()">Copy Emails</button>
</div>

Got double "onmouseover" Javascript

first can you look on those two image so you understand.
When not hover: http://s15.postimg.org/sn6rk45rf/not_Hover.png
When hover: http://s16.postimg.org/yk6beg1ad/on_Hover.png
Right now when I have my mouse over a image, both image get buttons.
But I just want each image have theve own buttons on mouse over and the other image hide the buttons.
I don't really know how to fix it, and I'm very beginner with Javascript.
Here is my HTML/CSS/Javascript codes.
var buttonNew = document.getElementsByClassName('buttonNewest');
var buttonRan = document.getElementsByClassName('buttonRandom');
function imageOver() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "block";
buttonNew[i].style.animation = "moveButtonsRight 2s";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "block";
buttonRan[i].style.animation = "moveButtonsLeft 2s";
}
}
function imageLeave() {
for(var i = 0; i < buttonNew.length; i++) {
buttonNew[i].style.display = "none";
}
for(var i = 0; i < buttonRan.length; i++) {
buttonRan[i].style.display = "none";
}
}
.charSelect[role="Background"] {
width: 1600px;
min-height: 600px;
margin: 25px auto;
}
.charSelect[role="Background"] > h1 {
width: 300px;
margin: 0 auto;
border: dashed 2px rgba(255, 207, 0, 0.75);
text-align: center;
text-transform: uppercase;
font-size: 2.6em;
text-shadow: 2px 2px 3px rgb(0, 0, 0);
}
.charSelect[role="Characters"] {
position: relative;
display: inline-block;
width: 250px;
height: auto;
background: rgba(42, 42, 42, 0.7);
border: dashed 2px rgba(255, 207, 0, 0.4);
color: rgba(255, 207, 0, 1);
opacity: 0.6;
-webkit-transition: opacity 1s;
margin-left: 250px;
}
.charSelect[role="Characters"]:hover {
opacity: 1;
transform: scale(1.05);
}
.charSelect[role="Names"] {
width: 100%;
font-size: 1.8em;
}
.charSelect[role="Names"] > p {
margin: 0 !important;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}
/* Buttons */
.charSelect[role="LatestVid"], .charSelect[role="RandomVid"] {
width: 170px;
height: 45px;
background: -webkit-linear-gradient(top, rgb(255, 207, 0), rgba(255, 207, 0, 0));
text-align: center;
line-height: 45px;
color: black;
-webkit-transition: background 1s;
transition: background 1s;
box-shadow: 0px 0px 3px;
}
.charSelect[role="LatestVid"] {
display: none;
position: absolute;
top:50%;
right: 70%;
}
.charSelect[role="RandomVid"] {
display: none;
position: absolute;
top:50%;
left: 70%;
}
.charSelect[role="RandomVid"]:hover , .charSelect[role="LatestVid"]:hover {
background: rgb(255, 207, 0);
}
/* Animation */
#-webkit-keyframes moveButtonsLeft {
0% {
left: 50%;
}
100% {
left: 70%;
}
}
#-webkit-keyframes moveButtonsRight {
0% {
right: 50%;
}
100% {
right: 70%;
}
}
<!-- Character one -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>
<!-- Character two -->
<div onmouseover="imageOver()" onmouseleave="imageLeave()" class="charSelect" role="Characters">
<img src="chars/Dekker.gif" width="250"/>
<div class="charSelect buttonNewest" role="LatestVid">Newest Videos</div>
<div class="charSelect buttonRandom" role="RandomVid">Random Videos</div>
<div class="charSelect" role="Names"><p>Dekker</p></div>
</div>

You're calling an imageOver() that loops all your elements.
Instead of using JS (at all) I'd go with pure CSS:
*{font: 14px/1 sans-serif;}
.charSelect{
position: relative;
display: inline-block;
vertical-align: top;
}
.charButtons{
position: absolute;
bottom: 40px;
width: 100%;
text-align:center;
opacity: 0;
visibility: hidden;
transition: 0.4s;
-webkit-transition: 0.4s;
}
.charButtons a{
display: block;
margin-top: 1px;
text-align: center;
color: #fff;
background: #444;
padding: 10px;
opacity: 0.9;
transition: 0.3s;
-webkit-transition: 0.3s;
}
.charButtons a:hover{ opacity:1; }
.charSelect:hover .charButtons{
visibility: visible;
opacity: 1;
}
<div class="charSelect">
<img src="http://placehold.it/180x150/4af/&text=Hero+1">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 1</h2>
</div>
<div class="charSelect">
<img src="http://placehold.it/180x150/fa4/&text=Hero+2">
<div class="charButtons">
Newest Videos
Random Videos
</div>
<h2>HERO 2</h2>
</div>

The problem is that you're not reffering tot the current object that you have cursor on. If you go with with cursor over and image, your function will apply those changes for all buttonNew and buttonRan that can be found on page.