Place a variable as a HREF - javascript

Basically, is it possible to do something like....
Click me!
<script>
function clicked() {
if(myVar == 1) {
link="http://stackoverflow.com"
}
else if (myVar == 2) {
link="http://google.com"
}
}
</script>
This example is probably impossible due to it firing at the same time...
But is it at all possible to use variables there?
Basically, I need a link that'll bring you to two different places depending on a variable.
I suppose I could have two links, and just hide/show each one respectively depending on the variable, but I was wondering if it's possible another way?
I'm working with HTML, CSS, JavaScript, and JQuery...
Thank you!

You could do...
$('a').click(function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
});
If the condition is met, then it will take you to a different URL.
Otherwise, the link will work as expected.
If you didn't want to use jQuery, that'd be...
var anchors = document.getElementsByTagName('a');
for (var i = 0, anchorsLength; i < anchorsLength; i++) {
anchors[i].onclick = function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
}
}

You could simply use Javascript to do a redirect:
<script>
function clicked() {
if(myVar == 1) {
window.location = "http://url1.com";
}
else if (myVar == 2) {
window.location = "http://url2.com";
}
}
</script>

No it's not possible to do it the way you want.
Why don't you do this instead -
Click me!
<script>
function clicked()
{
if(myVar == 1)
{
window.location.href = "www.stackoverflow.com";
}
else if (myVar == 2)
{
window.location.href = "www.google.com";
}
}
Take a look at Mozilla Developer Center for further references about the window.location object.

you could do this:
<script> function clicked() {
if(myVar == 1) {
window.location="http://stackoverflow.com"
}
else if (myVar == 2) {
window.location="http://google.com"
} }
</script>

Try this out
Click me!
<script>
function clicked() {
if(myVar == 1) {
location.replace("http://stackoverflow.com");
}
else if (myVar == 2) {
location.replace("http://google.com");
}
}
</script>
Cheers. This will take you to the desired place based on the myVar values!

function clicked() {
var dest = "";
if(myVar)
dest = "http://stackoverflow.com";
else
dest = "http://google.com"
window.navigate(dest);
But I see everyone said about the same. Just check which of the methods works on most browsers

Related

elementary If else statement not working in javascript

I am totally new to javaScript and cannot understand why this elementary if else statement won't work. And before you mark down yes I have looked and can't find a simple answer to this simple question. Many thanks.
$(document).ready(function (){
var try = 0;
if (try == 0){
alert("yes");
} else {
alert("no");
}
});
Because try is a javascript keyword and you cannot use it.
Change it to try1 just for instance.
$(document).ready(function (){
var try1 = 0;
if (try1 == 0){
alert("yes");
} else {
alert("no");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

js on change event getting looped in js confirm

I have a flip toggle button().I am writing a function on change of toggle button,on change I am declaring js confirm box ,if confirms true the button remains in changed state,else it will revert in its previous state.My issue is the function is getting iterating(looping).Please suggest
To me it looks quite ok. Maybe you just forgot to encapsulate your code in $(document).ready - this is necessary because otherwise your Javascript function will be loaded before the HTML DOM has been loaded - so your function will fail to access the DOM elements.
$(document).ready(function() {
$("#btn").on("change", function() {
var txt;
var btnStatus = $("#btn").val();
console.log("btnstataus>>>>>" + btnStatus);
var r = confirm("Are you sure to change?");
if (r == true) {
if (btnStatus == "on") {
$("#btn").val("on");
} else {
$("#btn").val("off");
}
} else {
if (btnStatus == "on") {
$("#btn").val("off");
} else {
$("#btn").val("on");
}
}
});
});
Here is a working sample of your code:
https://plnkr.co/edit/AdzcN04F1fsLe9xw454j?p=preview

Change image src back and forth after first click

What I want to happen is... when the image 'x' is clicked i want it to change image then when it is clicked again i want it to change back so on and so fourth, however I only want this to happen on the second click.
So X is clicked & nothing happens,
Then when it is clicked again it changes images,
and then back after another click, and then it alternates back and forth after that,
until the page resets, then i want it to reset as well.
this is my code so far:
document.getElementById('x').onclick = function() {
var ClickedOnce = 0;
if (this.src == 'Media/Images/Other/SwitchUP.jpg') {
ClickedOnce + 1
}
if (this.src == 'Media/Images/Other/SwitchUP.jpg' && ClickedOnce > 1) {
this.src = 'Media/Images/Other/SwitchDOWN.jpg';
} else if ('Media/Images/Other/SwitchDOWN.jpg') {
this.src = 'Media/Images/Other/SwitchUP.jpg';
}
}
It looks like the reason this isn't working is because you are declaring the var ClickedOnce inside of a function. This means that it is a local variable inside that function that will be set to 0 every time that function is called. Therefore, the same thing will happen every time it is clicked.
Try declaring some variable outside of the function.
You can try something like this:
var wasClicked = false;
document.getElementById('x').onclick = function() {
if (!wasClicked) {
wasClicked = true;
return;
}
if (this.getAttribute("src") == 'Media/Images/Other/SwitchUP.jpg') {
this.setAttribute("src", 'Media/Images/Other/SwitchDOWN.jpg');
} else {
this.setAttribute("src", 'Media/Images/Other/SwitchUP.jpg');
}
}
Additionally, since you tagged this question with jQuery, here is a jQuery approach to it:
var wasClicked = false;
$(document).ready(function() {
$("#x").click(function() {
if (!wasClicked) {
wasClicked = true;
return;
}
if ($(this).attr("src") == "path/to/some/image") {
$(this).attr("src", "path/to/other/image");
} else {
$(this).attr("src", "path/to/some/image");
}
});
});

javascript sort with data handlers issue

sorry if this is a stupid question but I'm a bit of a javascript novice and I'm trying to learn better programming instead of "cheating" and writing out each event type individually.
I can't seem to get this to run. The user clicks on a link at the top of the page with a data attribute with an event types ID number in it (data-event-type="1", etc). It should hide any events without that id number. JS and HTML is below.
JS fiddle with it all
http://jsfiddle.net/96r9jqp6/
HTML
<div class="sort">
All
Trainer
Conference
</div>
<div class="events-container">
<div class="eventsys-event-wrapper" data-event-type="1">
event 1 info here
</div>
<div class="eventsys-event-wrapper" data-event-type="2">
event 2 info here
</div>
<div class="eventsys-event-wrapper" data-event-type="1">
event 3 info here
</div>
<div class="eventsys-event-wrapper" data-event-type="2">
event 4 info here
</div>
</div>
Javascript
<script src="text/javascript">
$(document).ready(function(){
$('.eventSort').click(function(){
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
var thisEventSort = $(this).attr("data-event-sort");
if (thisEventSort = "0"){
$('.eventsys-event-wrapper').show('fast');
return;
} else {
$('.eventsys-event-wrapper').each(function(){
var thisEventType = $(this).attr("data-event-type");
if (thisEventType = thisEventSort) {
$(this).show('fast');
} else {
$(this).hide('fast');
}
});
}
});
});
</script>
if (thisEventSort = "0")
needs to be
if (thisEventSort === "0")
and same for
if (thisEventType = thisEventSort)
needs to be
if (thisEventType === thisEventSort)
Something like this
$('.eventSort').click(function(e){
e.preventDefault();
var thisEventSort = $(this).data("event-sort");
$('.eventsys-event-wrapper').hide().filter(function() {
return thisEventSort === 0 ? true : ($(this).data('event-type') == thisEventSort);
}).show('fast');
});
FIDDLE
You didnt pass event also... so your if there is not needed...
and use .data("event-sort") for this...
$(document).ready(function(){
$('.eventSort').click(function(event){
event.preventDefault();
var thisEventSort = $(this).data("event-sort");
if (thisEventSort == "0"){
$('.eventsys-event-wrapper').show('fast');
return;
} else {
$('.eventsys-event-wrapper').each(function(){
var thisEventType = $(this).attr("data-event-type");
if (thisEventType == thisEventSort) {
$(this).show('fast');
} else {
$(this).hide('fast');
}
});
}
});
});
I've updated your jsfiddle here
http://jsfiddle.net/96r9jqp6/5/
the most import piece is your use of the "=" operator
you need to use triple equal to test for equality instead of just one.
also when using data-* attributes, you should use the jquery .data() function to retrieve its values
$(document).ready(function(){
$('.eventSort').click(function(){
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
var thisEventSort = $(this).data("event-sort");
console.log(thisEventSort);
if (thisEventSort === 0){
$('.eventsys-event-wrapper').show('fast');
return;
} else {
$('.eventsys-event-wrapper').each(function(){
var thisEventType = $(this).data("event-type");
if (thisEventType === thisEventSort) {
$(this).show('fast');
} else {
$(this).hide('fast');
}
});
}
});
});

Problems w/ window.location.hash

I have this content box on my site, that has different tabs on the side and when you click on one of the tabs, it uses JS to hide/show the according divs inside the content box.
I also have this in my head to give each div inside the content box it's own URL:
<script type="text/javascript">
function loadSmugInfo() {
if(window.location.hash == '#smuginfo')
document.getElementById('contentInfo').style.display = "block";
document.getElementById('contentSlideshow').style.display = "none"
}
</script>
<script type="text/javascript">
function loadFind() {
if(window.location.hash == '#find')
document.getElementById('contentMap').style.display = "block";
document.getElementById('contentSlideshow').style.display = "none"
}
</script>
<script type="text/javascript">
function loadSmugmug() {
if(window.location.hash == '#smugmug')
document.getElementById('contentSmugInfo').style.display = "block";
document.getElementById('contentSlideshow').style.display = "none"
}
</script>
<script type="text/javascript">
function loadMain() {
if(window.location.hash == '#')
document.getElementById('contentSlideshow').style.display = "block"
}
</script>
<script type="text/javascript">
function loadSlideshow() {
if(window.location.hash == '#slideshow')
document.getElementById('contentSlideshow').style.display = "block"
}
</script>
I also have it so when you a click a tab, it changes the hash.
Here is my problem.
When the page loads like normal (without a hash), the first and topmost div, is still not displaying (even though it's set to display: block in CSS).
I'm loading the functions you see above, using onLoad on an image above the content box.
Any help would be appreciated, I'm on a little bit of a tight schedule.
Let me know if you need any more information.
Thanks!
If you're doing what I understood you're doing, you'd have to use
if( (window.location.hash == '#') || (window.location.hash == '')
instead of
if(window.location.hash == '#')
since the hash is empty when the script is loading.
On a side note:
You only need one function for all of this:
function whatever()
{
if(window.location.hash == '#smuginfo')
{
case1
}
else if(window.location.hash == '#find')
{
case2
}
.
.
.
else
{
default for no hash
}
}
It would be shorter with a switch statement...
A couple of problems here.
First off, you dont show any way of calling these functions. You might want to start an interval timer to poll these functions and check them periodically. This will make sure they evaluate on page load, and each hash change.
You are also evaluating whether the hash == "#" which is the default, but will not show on initial page load. Maybe put an AND condiation to check if it == "" aswell.
Here is an example of some code i use for hash polling. Maybe it can help.
var start_hash = window.location.hash;
var recent_hash = '';
process_hash(start_hash); // Start the initial hash check
setInterval(poll_hash, 100); // Initialize our hash polling interval
function poll_hash() {
if (window.location.hash==recent_hash) { return; } // No change in URL hash
recent_hash = window.location.hash; // Set to check next time.
process_hash(recent_hash); // Changed hash, lets process
}
function process_hash(current_hash) {
// Check for defaults, then set to #home.
if(!current_hash || current_hash == '' || current_hash == '#')
{ current_hash='#home'; }
// Strip the # for the hash
var hash_id = current_hash.match(/[^#]+/g);
if(hash_id == 'home') { do something; }
}
Try this:
<script>
document.domain = 'facebook.com';
try {
try {
if (window.opener && window.opener.graphexplorer) {
window.opener.graphexplorer.authCallback(window.location.hash);
}
} catch(e) { }
} catch (e) { }
window.location.hash = '';
window.close();
</script>

Categories

Resources