I select a span element on the page. For the first click, I want it to link to another page. On the second click, I want it to return to the original page.
For example, I have a link with example.com, which is the original. When this element "abcd" is clicked I want it to link to example.com/ar, and when it's clicked again I want it to go back to example.com.
document.querySelector('span.arb').addEventListener('click', function() {
a.href="example.com";
})
How do I complete this using the above?
you can get link and change her after click
document.querySelector('span.arb').addEventListener('click', toogle)
function toogle(){
if( document.querySelector('span.arb').href === "domain.com"){
document.querySelector('span.arb').href = "domain.com/link"
} else if (document.querySelector('span.arb').href === "domain.com/link"){
document.querySelector('span.arb').href = "domain.com"
}
Hold the link in a data attribute and use that to toggle.
document.querySelector("[data-toggleHref]").addEventListener("click", function(){
//Get the link element
var a = document.querySelector("a");
var current = a;
//Log to demontrate only
console.log(this.dataset.togglehref);
//Update the link
a.href = this.dataset.togglehref;
//Set the data attribute for toggle
this.dataset.togglehref = current;
});
Link
<span data-toggleHref="/pageb.html">Click Me</span>
try this code:
document.querySelector('span.arb').addEventListener('click', function() {
if(a.href == "example.com") {
a.href="example.com/ar";
} else {
a.href="example.com";
}
})
or a shorter answer using ternary operator:
document.querySelector('span.arb').addEventListener('click', function() {
a.href = a.href == "example.com" ? "example.com/ar" : "example.com";
})
Try this:
let count = 0;
document.querySelector('span.arb').addEventListener('click', function () {
count++;
document.querySelector('a').href = "http://example.com";
if (count == 1) {
document.querySelector('a').href = "http://example.com/ar";
} else {
document.querySelector('a').href = "http://example.com";
}
});
Link
<span class="arb">Click Me</span>
Related
First of all, my English is very bad, sorry for that.
I don't know much javascript and I would like your help.
there is one div
<div id="click"></div>
when clicking on this div
if (...click){
var a = "click open";
}else{
var a = "";
}
I need a coding like this. When clicked, the variable a should be filled and empty when not clicked.
how do i do this please help
all i want is when it is clicked the variable a will be full when not clicked it will still work but it will be empty
if (...click){
var a = "click open";
}else{
var a = "";
}
all i want is when it is clicked the variable a will be full when not clicked it will still work but it will be empty
Considering the following html :
<div id="click"></div>
You can initialize the variable in javascript as an empty string and add an event listener to change the value when the div is clicked with the following js code:
let a = "";
const click = document.getElementById("click");
click.addEventListener('click', function(){
a = "click open";
})
I don't understand your question, because your button is empty here. So, if your button is empty, how do you click on the button and get the result? That is why I added two answers and hope it will help you.
//example one
const clickBtn = document.getElementById("click");
let click = true;
if (click) {
var a = "click open";
clickBtn.innerHTML = a;
} else {
var a = "";
clickBtn.innerHTML = a;
}
//exmaple two
const clickBtn2 = document.getElementById("click2");
let click2 = true;
clickBtn2.addEventListener("click", () => {
if (click2) {
var a = "yes, click open";
clickBtn2.innerHTML = a;
} else {
var a = "";
clickBtn2.innerHTML = a;
}
});
<div id="click"></div>
<div id="click2">Click me</div>
I added the text "Click" to give the element a clickable area.
let a = '';
document
.querySelector('#click')
.addEventListener('click', () => a = 'clicked');
<div id="click">Click</div>
This is what I wanted to do I didn't know how to do it?
let jmin = "";
const click = document.getElementById("price_range");
click.addEventListener('click', function(){
var jmin = "min=" + minimum_price;
})
history.pushState(null, '', 'index.php?' + kategori + filtb + filtr + filts + jmin);
I want to replace #cardvieo_localstream with #cardvideo_remotestream at the first click, again I click the same element, I want to change #cardvideo_remotestream back #cardvieo_localstream, I'm not sharp at jQuery yet, but I'm trying to learn. I appreciate all help I can get.
I've try this code but working on first click. but not working on second click
$('.video-list .videoWrap').on('click', function() {
var $thisVideoWrap = $(this).find('.video-list .videoWrap');
var $mainVideoWrap = $('.mainVideoWrap');
if ($(this).attr('id') === '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_remotestream');
}
else if($(this).attr('id') == '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_local');
$mainVideoWrap.attr('id', 'cardvideo_remotestream');
}
});
Don't change An Id Attribute because of id is a unique value Only use the Classname, I swap the elements successfully
// using jQuery
var initVideoSwapping = function () {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0) {
$('.video-list .videoWrap').on('click', function () {
var $thisVideo = $(this).find('video')[0];
var $mainVideo = $('.mainVideoWrap').find('video')[0];
swapNodes($thisVideo, $mainVideo)
});
}
}
function swapNodes(a, b) {
var aparent = a.parentNode;
var asibling = a.nextSibling === b ? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
$(function () {
initVideoSwapping();
});
I am using this HTML on my site:
<a id="slick-toggle" href="javascript:change_status()"><img src="img/enable.png"></a>
When I click this link, I would like to change the image src to img/disable.png. And revert back to img1.jpg when clicked again & so on. Can someone explain how I do this using jQuery?
Also on each click i want to change my table's column emp_ref_table.enabled_flag value 0 for disable.png and 1 for enable.png
Here is my existing jQuery if this helps:
function change_status() {
alert('sure to change the status ?');
$(document).ready(function() {
$('#slick-toggle').click(function() {
e.preventDefault();
$('img', this).attr('src', function(i, oldSrc) {
return oldSrc == 'img/enable.png' ? 'img/disable.png' : 'img/enable.png';
});
return false;
});
});
}
Try this code : place all your pic changing code in a function:
var changeStatus = false;
function change_status() {
var r = window.confirm("Sure to change the status!");
if (r == true) {
if (changeStatus == false) {
changeStatus = true;
document.getElementById("en-ds").src = "https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg";
} else {
changeStatus = false;
document.getElementById("en-ds").src = "https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg";
}
}
}
<a id="slick-toggle" href="javascript:change_status()"><img id="en-ds" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
</a>
Try the simplified one below, set your enable and disable image paths.
$(function() {
$('#slick-toggle').click(function() {
$('img', this).attr('src', function(el, src) {
var imgEnable = 'http://www.google.com/logos/doodles/2014/australia-day-2014-doodle-4-google-2013-winner-6247445470117888-hp.jpg';
var imgDisable = 'https://www.google.com/logos/2012/d4g_poland12-hp.jpg';
return (src == imgEnable) ? imgDisable : imgEnable;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="slick-toggle" href="javascript:;">
<img src="http://www.google.com/logos/doodles/2014/australia-day-2014-doodle-4-google-2013-winner-6247445470117888-hp.jpg">
First I used window.onbeforeunload on my application. It's working on over page but when click on anchor link it should be disabled Click. Any ideas? Please share. My code is below it is not working:
var submitFormOkay = false;
window.onbeforeunload = function () {
if (!submitFormOkay) {
return "Don't delay your Success. Get FREE career counselling session. Fill in the details below";
} else {
submitFormOkay = '';
}
}
<a class="navbar-brand" href="http://www.google.com">Click</a>
You could attach a global click handler on document.body which, if the click passed through an a element, sets submitFormOkay to true (or you could use another variable to bypass the check, or just clear the handler by assigning null to window.onbeforeunload), e.g.:
$(document.body).on("click", "a", function() {
submitFormOkay = true; // Or set another flag you'll check,
// or clear onbeforeunload entirely
});
Without jQuery (since I missed the jquery tag initially):
document.body.addEventListener("click", function(e) {
var element;
for (element = e.target; element != document.body; element = element.parentNode) {
if (element.tagName.toUpperCase() === "A") {
submitFormOkay = true; // Or set another flag you'll check,
// or clear onbeforeunload entirely
break;
}
}
}, false);
using jquery it can be follow:
var submitFormOkay = false;
$(window).on('beforeunload',function () {
if (!submitFormOkay) {`enter code here`
return "Don't delay your Success. Get FREE career counselling session. Fill in the details below";
} else {
submitFormOkay = '';
}
})
<a class="navbar-brand" href="http://www.google.com">Click</a>
$('a').on('click',function(e){
e.preventDefault();
$(window).off('beforeunload');
window.location = $(this).attr('href');
});
I'm creating a spoiler-tag script where the user clicks on spoiler text, the text will either blank out or change font-color depending on the class assigned to it. I'm rather a noob at Javascript.
My script only works when I click on the spoilered text when it is blank- so when I have already clicked on it, I can't reclick to change it back.
Here is the code that works:
// Hide Spoiler Individually
var singleHidden = document.getElementsByClassName("hidden");
var hideMe = function () {
var attribute = this.getAttribute("hidden");
this.className = "show";
};
for (var i = 0; i < singleHidden.length; i++) {
singleHidden[i].addEventListener("click", hideMe, false)
};
Here's a link on jsfiddle.
https://jsfiddle.net/o94c00hb/
Try this:
var hideMe = function() {
if(this.className == "hidden")
this.className = "show"
else
this.className = "hidden"
};
If you're not opposed to using jquery i would do something like this:
$('.hidden').on('click', function(){
$(this).toggleClass('show');
});
JSFIDDLE