We Keep Coding

JQuery/JS function not firing on <a>

I have five slide shows on one page and I want to be able to cycle through all of them. The slideshow is made of an UL with each a different ID, so I want to create two functions for the arrows to cycle through the slides. And I want to pass the slide ID. My code:
$(document).ready(function() {
var slides = document.querySelectorAll('#slides li');
var slidesTotal = $('#slides li').length;
var currentSlide = 1;
function nextSlide() {
//$('a.nextSlideArrow').click(function() {
$('#slides .slide' + currentSlide).hide();
currentSlide++;
if(currentSlide > slidesTotal) {
currentSlide = 1;
}
$('#slides .slide' + currentSlide).show();
//return false;
//});
}
function previousSlide() {
//$('a.previousSlideArrow').click(function() {
$('#slides .slide' + currentSlide).hide();
currentSlide--;
if(currentSlide == 0) {
currentSlide = slidesTotal;
}
$('#slides .slide' + currentSlide).show();
//return false;
//});
}
});
<div id="slider-container">
<ul id="slides">
<?php
for ($i = 1; $i <= $amountImagesSlideshow[3]; $i++) {
echo '<li class="slide'.$i.'"><img src="'.$directories[3],$i.'.jpg" /></li>';
}
?>
</ul>
<div class="galleryPreviewArrows">
❮
❯
</div>
</div>
Now the funny thing is, if I remove the comments where the click is on the jQuery object and comment out the function, it will work. But not this way? I don't understand.

There is a difference between onclick event and functionality of href attribute.
When you write like this:
❮
It means, you are hyper referencing(trying to redirect) to some location whenever this anchor tag is clicked.
It doesn't mean you are doing only click action. It means, you are doing click + redirection.
href = click + redirection.
whereas, your need is only click event handling. Therefore, how you are handling through jquery.
$('a').on("click",function(){
----
----
})
This will work fine.

You shouldn't be using href to try to access a javascript function. That attribute is for navigation purposes. Also, binding to a jquery click even is the better way to handle your events so you adhere to separation of concerns design patterns.
If you need to put your function call in an attribute decorator, use the onclick attribute instead and don't evaluate the function by adding the parenthesis, just reference it.
<a onclick="previousSlide" class="previousSlideArrow">❮</a>

Anchor tag is for navigation which requires Href attribute. You should not use href for event handling. Instead:
<div class="galleryPreviewArrows">
❮
❯
</div>

It is strange..But writing that function outside document.ready works. It looks like that function should be defined before document is ready.
That may be the reson alert works always..which is a built-in function.
Also this is not the recommended way to bind event listner. Use jquery on/off to add/remove listners.
function nextSlide() {
//$('a.nextSlideArrow').click(function() {
alert('next');
//return false;
//});
}
function previousSlide() {
//$('a.previousSlideArrow').click(function() {
alert('prev');
//return false;
//});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-container">
<div class="galleryPreviewArrows">
❮
❯
</div>
</div>

html <a> link javascript function with parameter

I'm trying to pass one parameter (text variable) from a <a> tag. This is the code that I'm using:
<a onclick='javascript:Page_Change('Previous')' class='PageLink'>Previous</a>
Without the parameter 'Previous' is O.K and the function is working correctly. There is any possibility to pass the parameter value only using pure js?

If you want to do it inline you can do this:
<a onclick="javascript:Page_Change('Previous')" class='PageLink'>Previous</a>
But it's better to keep it seperate like this:
<a id="prev" class = "PageLink">Previous</a>
You may bind the event handler using the jQuery library
<script>
// jQuery
$('#prev').click(function() {
Page_Change('Previous')
});
</script>
or using standard JavaScript
<script>
// javascript
document.getElementById('prev').addEventListener('click', function() {
Page_Change('Previous')
}, false);
</script>

May I suggest this, where you can pass a number of links having different parameters.
<a data-param="Previous" class="PageLink">Previous</a>
<a data-param="Next" class="PageLink">Next</a>
var links = document.getElementsByClassName("PageLink");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function(e) {
Page_Change(e.target.getAttribute("data-param"))
}, false);
}

Is there something like a clicked===true conditional statment in javascript?

using javascript, is there a condition something like this
if (clicked===true && var===3) {
function executes here
}
if there isn't, how can you get the same effect?

For mouse and UI handling the Javascript model is based on events. In other words what you do is
element.onclick = function() {
// what to do when that element is clicked
};
for example:
<!DOCTYPE html>
<html>
<body>
<div id="thediv">Click me</div>
<script>
document.getElementById("thediv").onclick = function() {
alert("Awww... why did you do that?");
};
</script>
</body>
</html>

you have to bind an eventhandler to the element. you can do this inline with an onclick eventhandler. Also you can't use the name var because it is a reserved word in javascript.
html
<a id="mylink" href="#" onclick="handleMyClick();">Click me</a>
javascript
var myvar=3;
handleMyClick(){
if(myvar==3){
alert("you clicked the link and myvar is 3");
}
}

how to call jquery function with different <a href="">

I want to call 2 different jquery functions to hide links
<a href="">.zip file, first link
</a>
<script>
$("a").click(function() {
location.href="first.location";
return false;
});
</script>
<a href="">.tar.gz file, second link
</a>
<script>
$("a").click(function() {
location.href=="second.location";
return false;
});
</script>
How can I call the 2 functions so that I call the first one clicking the first link and the second one clicking the second link?
Thanks a lo

This is not the best solution. For best results you might want to restructure your html and add some sort of classes and IDs to the links or their parent to identify them. But this will work
For the first link
$("a:eq(0)").click(function() {
location.href="first.location";
return false;
});
and for the second link
$("a:eq(1)").click(function() {
location.href=="second.location";
return false;
});

If you set the href in the markup there is no need for JQuery or Javascript.
<a href="first.location">.zip file, first link
</a>
<a href="second.location">.tar.gz file, second link
</a>

You can use the :eq() Selector here like:
// Clicking the first link
$("a:eq(0)").click(function () {
location.href = "first.location";
return false;
});
// Clicking the second link
$("a:eq(1)").click(function () {
location.href = "second.location";
return false;
});

Like it has already been suggested the best way to do it is to have different id's for these a tags. But if for some reason you don't want to assign ids(why on earth would you do that?) you could do the following:
Wrap the anchor tags in a div and give it an id like this
<div id="myDiv">
First Link
Second Div
</div >
Then use jQuery to do the linking:
<script>
$(function(){
$("myDiv").children(a:first-child).click(function(){
// Do stuff here
});
$("myDiv").children(a:last-child).click(function(){
// Do stuff here
});
});
</script>

you can introduce an id attribute to your links. and then trigger the events based on the id of the element.
<a href="" id='link1'>.zip file, first link
</a>
<script>
$("#link1").click(function() {
location.href="first.location";
return false;
});
</script>
<a href="" id='link2'>.tar.gz file, second link
</a>
<script>
$("#link2").click(function() {
location.href=="second.location";
return false;
});
</script>

Give link in html(href)
$("a").click(function()
{
location.href = $(this).attr('href');
return false;
});

I think this might help:
<a id="first" href="">.zip file, first link</a>
<script>
$("first").click(function() {
location.href="first.location";
return false;
});
</script>
<a id="second" href="">.tar.gz file, second link </a>
<script>
$("second").click(function() {
location.href=="second.location";
return false;
});
</script>

$("a:eq(0)").click(function() {
location.href="first.location";
return false;
});
$("a:eq(1)").click(function() {
location.href=="second.location";
return false;
});

How can i prevent double submission of <a href="">?

I have a question regarding the double submission.
I have a multiple <a href = "">.
I want to disables all the <a href=""> if i click in one of the <a href= "">
Code:
<a href="dashboard.php" id ="submitID" class="submit" >Dashboard </a>
<a href="orderList.php" id ="submitID" class="submit" >Order List</a>
New Order

First, please fix your ids to be unique.
If you're using jQuery versions 1.4.3+:
$("a.submit").click(function() {
$("a.submit").bind('click', false);
});
If not, bind function() { return false; }. Then you can also
$("a.submit").unbind('click')
when you want them to work again.

Welcome to Stack Overflow.
First of all, you should never have multiple DOM elements with the same ID.
Second of all, set a variable in a bind to the submit class (the bind is using jquery), and flip it if you submit.
Include jquery with a script tag and then wrap your javascript in document ready
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function () {
$('.submit').bind('click', function () {
var isSubmitted = false;
if (isSubmitted === false) {
$.get($(this).attr('href'), function () {
isSubmitted = true;
});
}
});
});
</script>
This is of course assuming you want some ajax style functionality. If not, you shouldn't really be worried if you have a link since you'd be posting to a new page

Jquery:
var count=0;
$(".submit").click(function(){
if(count>0){
return false
}
++count;
});
HTML
<a href="dashboard.php" id ="submitID1" class="submit" >Dashboard </a>
<a href="orderList.php" id ="submitID2" class="submit" >Order List</a>
New Order

var submitStatus = false;
$('a.submit').click(function(e){
if (!submitStatus) {
alert('clicked');
submitStatus = true;
} else {
e.preventDefault();
}
});
You can try it here: http://jsfiddle.net/p8a5s/
And dont use the same IDs for different DOM elements, of course