We Keep Coding

Enable Javascript function on image click

I had an image which appears on the click of another image.
I'm posting the code below. Please tell me where I went wrong. Thanks !
JavaScript
function suit1() {
var element = document.getElementById("suit1");
element.setAttribute("Hidden", "False");
}
HTML
<img src="suit1.png" style="width:100%; height:595px;" hidden="true" id="suit1"/>
<img src="point.png" onclick="javascript:suit1()">

Try this:
function suit1() {
var element = document.getElementById("suit1");
element.removeAttribute("hidden");
}

As stated in the comments, the number in suit1() was causing the issue. However, changing the function name to any name other than the id for first img resolves the problem. HTML:
<img src="suit1.png" style="width:100%; height:595px;" hidden="true" id="suit1"/>
<img src="point.png" onclick="javascript:some1()">
JavaScript:
function some1() {
var element = document.getElementById("suit1");
element.removeAttribute("hidden");
}
Or change the id of the img.

Javascript Multiple IMG Arrays

I'm using a button onclick and Image array to show a 1 image, and then a third image. I want to have several images do this next to each other. The code works fine with one..But when I try to add another it goofs up. I'm very new to Javascript so do not know what the problem is.
<button onclick="Suit()" class="button">
<img id="IMG1" src="suit.png" class="suit" width="300" height="260">
</button>
<script>
img_array= new Array('suit.png','suitwrong.png','suittry.png');
i=0;
function Suit()
{
i++;
document.getElementById("IMG1").src=img_array[i];
if(i==img_array.length-1) {
i=-1;
}
}
</script>
I basically want to have x3 of this code (3 image click arrays). Happy to put it in a seperate .js file if that helps.

is this really the script? if it is so try changing something like put var everytime you declare a js variable. and practice more math and logic in arrays and loops.
btw try this
<button onclick="Suit()" class="button">
<img id="IMG1" src="suit.png" class="suit" width="300" height="260">
</button>
<script>
img_array= new Array('suit.png','suitwrong.png','suittry.png');
i=0;
function Suit()
{
i++;
document.getElementById("IMG1").src=img_array[i];
if(i==img_array.length) {
i=i-img_array.length;
}
}
</script>
now try to add another picture in your array

Simple automated image changer malfunction

I have a simple image changer that swaps between 2 images by a very simple bit of jQuery but for reasons unknown, probably lack of sleep, I cannot get it to work as wanted.
Take a look at this jsfiddle to see what's going on.
Here's the js;
$(document).ready(function () {
function swap() {
$('#display').attr('id', 'hidden').hide();
$('#hidden').attr('id', 'display').fadeIn(500);
}
setInterval(swap, 2000);
});
Thanks!

fadeToggle is indeed the best solution, but another solution could be something like this.
If you want to add some extra logic to the toggle next to your hide and fadein.
function swap() {
if($("#display").is(":visible"))
{
$('#display').hide();
$('#hidden').fadeIn(500);
}
else
{
$('#display').fadeIn(500);
$('#hidden').hide();
}
}
http://jsfiddle.net/Rws8c/2/

Is this about what you're looking to do:
$(document).ready(function () {
function swap() {
$('#display').fadeToggle(500);
$('#hidden').fadeToggle(500);
}
setInterval(swap, 2000);
});

The following uses a slightly different approach that enables you to easily add more than 2 images:
HTML
<!-- Define a single img element -->
<img src="http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/NiceandSlezzy.png" alt="The Tin Pigeons" title="The Tin Pigeons" id="display">
JavaScript / jQuery
$(document).ready(function () {
// create an array that contains a entry for each img src. For more images, just add additional array entries.
var images = ['http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/NiceandSlezzy.png',
'http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/La-Route-Du-Rock1.jpg'];
var curImage=images.length-1;
var $image = $('#display');
function swap() {
$image.hide().attr('src', images[curImage]);
if (curImage==images.length-1) {
curImage=-1
}
curImage++;
$image.fadeIn(500)
}
setInterval(swap, 2000);
});

Jquery's index() function returns -1 instead of clicked list items position in his parent

Every time i try to use this once my list item is clicked, it returns -1.
Can someone enlighten me? I'd appreciate it :/ Thank you. Here is what i've been doing, need to create an image slider with thumbnails.
function create_thumbs() {
imagesUl.children('li').each(function() {
$('<li class="thumbs"><img src="images/thumb.png" alt="thumb"/></li>').addClass('thumb').hide().appendTo('ul#thumbs').fadeIn(300)
.click(function() {
goToSlide();
return false;
});
});
}
That is a function to creat thumbnails for each image i have in the slideshow. Below is the start of the function i will create to go to the corresponding image after the thumb is clicked.
function goToSlide() {
var thumbClicked = $(this);
alert(thumbClicked.parent('ul#thumbs').index());
}
Alert always returns -1. I tried couple of ways. What could be the problem ?
Since someone asked for some html, here it is, the only thing important to the issue :
<div id="slider">
<ul id="images">
<li><img src="images/slideshow/1.jpg" alt="1" title="1"/></li>
<li><img src="images/slideshow/2.jpg" alt="2" title="2"/></li>
<li><img src="images/slideshow/3.jpg" alt="3" title="3"/></li>
</ul>
<ul id="thumbs">
</ul>
</div>

this in the goToSlide function is the global scope, window. You can set the execution context explicitly using call:
goToSlide.call(this);
Alternatively you can pass the element you clicked on as an argument:
goToSlide(this);
....
function goToSlide(thumbClicked){
alert(thumbClicked.parent('ul#thumbs').index());
}

always try to post a minimum version to http://jsfiddle.net/ to make it easier for us to help you. Also read up on http://dailyjs.com/2012/06/25/this-binding/
try this
function create_thumbs() {
imagesUl.children('li').each(function() {
$('<li class="thumbs"><img src="images/thumb.png" alt="thumb"/></li>').addClass('thumb').hide().appendTo('ul#thumbs').fadeIn(300)
.click(function() {
goToSlide($(this));
return false;
});
});
}
function goToSlide(thumbClicked) {
alert(thumbClicked.parent('ul#thumbs').index());
}

Javascript change a picture when clicking

I wrote this function to change my pic what is the problem?
my aim is when clicking on a pic toggle between 2 images if image p is showing by clicking shows me image p1
I have this in script:
<script>
function changeimage()
{
if(this.getElementById('myimage').src=="../../images/p1.gif")
{
document.getElementById('myimage').src="../../images/p.gif";
}
else
{
document.getElementById('myimage').src="../../images/p1.gif";
}
}
</script>
in the html part I have these ones which are more than one picture but I set the whole of them with Id=myimage is it wrong to set the whole one same ID?:
<table width="100%">
<tr>
<td><img id='myimage' src="../../images/p1.gif" onclick="changeimage();setTable('table2');setTable('table2-2');check('table3');check('table3-3');check('table3-3-3');check('table4');check('table5');check('table6');check('table6-1');"></td>
<td style="font-weight: bold;font-size:13; font-family:arial,verdana;" width="25%">General Rule Options</td>
<td valign="bottom" width="100%">
I have many rows in my tables like this

The problem is the following line:
if(this.getElementById('myimage').src=="../../images/p1.gif")
In particular, it's the use of this. In your function this will refer to the window, and the window doesn't have a getElementById method. Use document like you have in the other cases:
if(document.getElementById('myimage').src=="../../images/p1.gif") {
//...
}
And it looks like it should work fine. Alternatively, you can pass in an a reference to the clicked element when you call the event handler, and reference that instead of using getElementById. For example:
onclick="changeimage(this);"

You call changeImage() from the <img> element, and then reference this inside the function. Since the function runs without context (it's not tacked onto an object), this would refer to the window object, which doesn't have getElementById.
In your HTML, change onclick="changeImage() to onclick="changeImage(this) and change your changeImage function to work with the argument passed instead:
function changeimage(img) {
if(img.src=="../../images/p1.gif")
img.src="../../images/p.gif";
else
img.src="../../images/p1.gif";
}

In the if statement it should be document.getElementById() not this.getElementById().
Though having said that, you can pass a reference to the clicked element in to your function:
<img onclick="changeImage(this);">
function changeImage(imgEl) {
if(imgEl.src=="../../images/p1.gif") {
imgEl.src="../../images/p.gif";
} else {
imgEl.src="../../images/p1.gif";
}
}
That way if all of your table rows are using the same two images they can all call the same function. Better than having the function hardcoded to a particular element's ID.

You need to call the function on click like this:
http://jsfiddle.net/4ca9m/
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img id="special" src="http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" alt ="none">
<script>
$("img#special").click(function () {
if($(this).attr("src") == "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg")
{
$(this).attr("src", "http://gcaptain.com/wp-content/uploads/2011/04/image5.png");
}
else
{
$(this).attr("src", "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg");
}
});
</script>
</body>
</html>

It doesn't work because when you use a relative path like:
<img src="../../images/p1.gif" onclick="changeimage();" />
The browser may secretly turn it into an absolute path like:
<img src="http://example.com/somewhere/images/p1.gif" onclick="changeimage();" />
At least Internet Explorer 9 exposes this behavior. However, you shouldn't depend on this behavior.
There are at least two ways how you can solve this problem:
Use data- attributes. You add a custom attribute to your image tag:
<img src="../../images/p1.gif" data-image="p1" onclick="changeimage();" />
Then change your JavaScript function to this:
<script>
function changeimage()
{
if(this.getElementById('myimage').getAttribute("data-image") == "p1") {
document.getElementById('myimage').src="../../images/p.gif";
document.getElementById('myimage').setAttribute("data-image", "p");
} else {
document.getElementById('myimage').src="../../images/p1.gif";
document.getElementById('myimage').setAttribute("data-image", "p1");
}
}
</script>
Use a variable to accomplish the same thing as above.
<img src="../../images/p1.gif" onclick="changeimage();" />
And the JavaScript:
<script>
var image = "p1";
function changeimage()
{
if(image == "p1") {
document.getElementById('myimage').src="../../images/p.gif";
image = "p";
} else {
document.getElementById('myimage').src="../../images/p1.gif";
image = "p1";
}
}
</script>
I prefer the first method because it allows me to include all information about the image in the image itself and not in a variable declared several lines away.