JavaScript - Changling Image And Text Onclick

I have searched this forum for similar queries & have come up with this
http://jsfiddle.net/defencedog/P33FR/

I don't know why this ain't working

This is hopefully a simple fix and I hope someone can help me out, I'm pretty new at coding.
I have a form on an html page and I want to make it so when a button is clicked, it adds one to the input to the right of it, and when a button to the right of the input is clicked, it will delete one to the left of that button. I don't want to resort to making a new function for each and every form, because there will be a lot.
Here is the form and input parts:
Code:

<form name="calculate">
<input type="button" onClick="add()" />
<input name="result" type="input" readonly="readonly" value="0" />
<input type="button" onclick="sub()" />
</form>

Here is what the function code looks like:
Code:

function add()
{
var add = 1 * calculate.name.value;
add = add + 1;
calculate.name.value = add;
}
function sub()
{
var add = 1 * calculate.name.value;
add = add - 1;
calculate.name.value = add;
}

Note: where I called the calculate.name.value, that obviously doesn't work, and I need some way, rather than making multiple functions and changing the name part, to be able to call to a name near the button, if at all possible.

Any and all ideas are appreciated,
Thanks!

Im currently working on a project for class and have been directed to use Javascript for what im looking to do.

Im a beginner when it comes to coding w/ javascript. Over the last couple days I've spent good time reading and practicing tutorials but have yet to do something I imagine is very basic for what I want to do.

At the moment, im looking to insert text into a webpage, that links to images. The images, ideally will layer on top of each other (Multiple images can be shown based on the "text" which activates it) Images shown, if done what im looking for, will have a transparent background to view images set behind one another.

I've spent a couple hours looking up code through google, found similiar code which i've tried to manipulate to do what I want. I have yet to put something successful together. Was hoping I could look upon experience programmers to help me out by pointing me in the right direction. Im willing to do the work, just looking for that guidance

Hi,
This button changes the button text when clicked, but it is always calling the same function. How to make the button depending on the button text to call different functions on onclick?

[CODE]
<script type = "text/javascript">
function button_switch(){
if (document.switch_form.switch_b.value == "Adam"){
document.switch_form.switch_b.value="Eva";
}
else{
document.switch_form.switch_b.value = "Adam";
}
}
</script>

<form name = "switch_form">
<input type = "button" name = "switch_b" id = "switch_b" value = "Adam" onclick = "button_switch()" />
</form>
[CODE]

Hello. I need some help with refreshing an image(cgi chart) onclick. This is because the chart changes every minute(due to database update) and i want whenever you click on it to refresh.
My code so far is:
HTML:
Code:

<label for="choseChart">Change chart!</label>
<select id="choseChart" onchange="changeChart('choseChart');"> 
<option value="0" selected="selected">Chart of Months(column)</option> 
<option value="1">Chart of Branches(column)</option> 
<option value="2">Chart of Months(pie)</option> 
<option value="3">Chart of Branches(pie)</option> 
</select><br/> 
 
<img id="chartType" style="cursor: pointer; cursor: hand" onclick="" alt="Chart" src="1.cgi"/>

Javascript:
Code:

function changeChart(chartid) 
{  
	var chart = document.getElementById(chartid).selectedIndex; 
	document.getElementById("chartType").src=changeImage[chart];
}

I know theres a lot of codes out there online for this but I cannot seem to get any of them to work for me. I am trying to make my layout for an item page for an online store. I'd like one big image, with one or 2 thumbnails under it which when clicked will switch the big image. Clicked, not mouseover.

Lets say my big images would be REG1.jpg and REG2.jpg, the first being the image on the page that will switch. THUMB1.jpg and THUMB2.jpg being the thumbnails.

Is there a simple way to do this or is the code a complete mess like I've been seeing on so many pages? I'd say I have an intermediate understanding of HTML and I've just started teaching myself javascript but I'm starting to fall off the wagon, I can't decipher the stuff coming up in these example codes.

Any help would be thoroughly appreciated!!

Here is my code for two tab images.

Code:

    <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
    <a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>

I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ?

Its basically to show which tab is active, one image is lighter then the other.


Can anyone help ?

Hi guys..
Im looking to basically have an image which is a button with a value, and when i click the image, it gets replaced by another image with a different value. when clicked again it would return to the original image and value..
Is this possible? and if so, please help cos im terrible at javascript!

Many thanks

I need some help here. I'm a complete newbie at this.

This is what I would like to have happen. Upon clicking an image (button) I would like a new window to open and I also want to the parent window to load as a new page. I've been searching around and found some code. I implemented it and got the new window to open, but the parent window does not change. Please let me know what to change. Here's what I have:

<script language="JavaScript"><!--
function newWindow(file,window) {
msgWindow=open(file,window,'resizable=no,width=1500,height=1000');
if (msgWindow.open == null) msgWindow.open = self;
}
//--></script>


<form>
<input value="Get Quotes Now"
type="image"
src="http://www.xyz.com/pictures/a1.jp"
onmouseout="this.src='http://www.xyz.com/pictures/a1.jpg';"
onmouseover="this.src='http://www.xyz.com/pictures/a2.jpg';"
onclick="newWindow('http://www.xyz.com/compare.html','window2');window.open('http://www.xyz.com/compare2.html','_self',' ')">
</form>

Hey guys,

Right now I have a random rotating slideshow with delay script implemented on a website. However I want to make ONE of the slides/images clickable to open up a PDF doc.

Can you please let me know what I need to add/change in this to make it do what I need? I am not big on java so need some help.

Thanks in advance!


Code:

<script language="javascript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=12000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

	randomimages[0]="images/simple_img_11.jpg"
	randomimages[1]="images/simple_img_2.jpg"
	randomimages[2]="images/simple_img_3.jpg"
	randomimages[3]="images/simple_img_4.jpg"
	randomimages[4]="images/simple_img_5.jpg"
	randomimages[5]="images/simple_img_6.jpg"
	randomimages[5]="images/simple_img_7.jpg"	

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
	preload[n]=new Image()
	preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

Ok so I have a problem which I previously thought I had solved.

I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function

I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked.

Anyway let's see what you think

Javascript:
Code:

<script type="text/javascript">
var imageURL = "../images/portfolio/open.png";

function changeImage() {

     if (document.images) {
              if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
         else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
         
         document.images["img1"].src = imageURL;
		 document.images["img2"].src = imageURL;
     }
} 
</script>

HTML:
Code:

<a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>

Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ??

Hi all,

I can't seem to add an onclick event to an image. I'm sure I am doing something wrong as I am very new to Javascript.

This is a part of my javascript code that is in the head and body of my HTML file:

Code:

<head>
<script language="JavaScript">
.....
.....
var redLocation0 = redArray[0]+".jpg";
....
....
	function redClick( buttonLocation ) {
	window.location = "http://www.yahoo.com/"
	}
....
....
</script>
</head>


<body>
<table>
<tr>
<td>
<script language="javascript">document.write('<IMG SRC="'+ redLocation0 +'">'); onclick="redClick('0')";</script>
</td>
</tr>
</table>
</body>

The image that is displayed is not clickable, and therefore the function redClick cannot be called.

Can someone please help me and tell me where I am going wrong here. I am kinda new to JavaScript.

Thanks!

I just started my javascript class two weeks ago and am having troubles already and my book is no help.

My first assignment is having a list of country names and when you click the radio button next to the name the country flag pops up in a designated area for the image. I have tried a few different things but nothing is working. I have the list of countrys and the radio buttons but when i click the radio button the image doesn't pop up. Also, when i click another radio button they all stay selected.

I want to create the form button similar to this:
http://www.customusb.com/quoteform-wref-flashdrives.php

Im a designer and i m a total noob in javascript, would appreciate very much if you could be patient with me....

i use an OnClick to switch the image but the if else statement just doent let me switch back to the original image, i not sure where i have gone wrong...

appreciate again if anyone could help me out...

below are the html and js thumnails:
http://img215.imageshack.us/f/73258715.jpg/
http://img35.imageshack.us/f/44225148.jpg/