By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,831 Members | 1,024 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,831 IT Pros & Developers. It's quick & easy.

Javascript image/number cell help....

P: 5
hi all! I'm new to programming and right now I am learning Javascript. I have a question regarding moving text and images from one cell/input to the other. What I am supposed to do is create a webpage containing three image tags (each with different pictures), three input fields(each with different numbers) and also a button. When the button is clicked all the pictures and numbers move one cell to the right while the rightmost element moves to the leftmost position. I have created a table with the three images, input fields with different numbers and the button. I'm having trouble figuring out the code that will move them each one cell to the right with every click of the button. I'm hoping someone could help me out with this. Thanks....
Oct 22 '08 #1
Share this Question
Share on Google+
3 Replies


RamananKalirajan
100+
P: 607
Hi, you can do it very easily. for each and every element in HTML, there is an attribute called ID which is unique. By using this unique Id u can retrieve the values.

For Ex:
you specified the textbox i.e input box, while writing ur HTML code just give an name for the attribute "id"

[HTML]<input type="text" id="myText">[/HTML]

You can retrieve the value of that input box in JS as

[HTML]var x = document.getElementById('myText').value[/HTML]

This line will give the value entered by the user in the text box. Likewise for Image u change the Image source.

Regards
Ramanan kalirajan
Oct 22 '08 #2

P: 5
Hi, you can do it very easily. for each and every element in HTML, there is an attribute called ID which is unique. By using this unique Id u can retrieve the values.

For Ex:
you specified the textbox i.e input box, while writing ur HTML code just give an name for the attribute "id"

[HTML]<input type="text" id="myText">[/HTML]

You can retrieve the value of that input box in JS as

[HTML]var x = document.getElementById('myText').value[/HTML]

This line will give the value entered by the user in the text box. Likewise for Image u change the Image source.

Regards
Ramanan kalirajan

Thanks for the reply! I'm not sure if i explained it right or maybe I just dont understand exactly what your saying. The input boxes will already have a set number inside (whatever numbers i choose). I just need to type a code that when the the user clicks the button the image and the number in the input box(which is located under the image) will both move to the next image slot and input box. I have to do this with three images. Therefore each time the button is clicked each things moves to the right with the exception of the rightmost element which moves to the left.
Oct 22 '08 #3

RamananKalirajan
100+
P: 607
Thanks for the reply! I'm not sure if i explained it right or maybe I just dont understand exactly what your saying. The input boxes will already have a set number inside (whatever numbers i choose). I just need to type a code that when the the user clicks the button the image and the number in the input box(which is located under the image) will both move to the next image slot and input box. I have to do this with three images. Therefore each time the button is clicked each things moves to the right with the exception of the rightmost element which moves to the left.
I have done with two images and two text boxes, try for three things by yourself. any doubts just post it in the forum.

[HTML]<html>
<head>
<script type="text/javascript">
function swap()
{
var tempsrc = document.getElementById('img1').src;
document.getElementById('img1').src=document.getEl ementById('img2').src;
document.getElementById('img2').src=tempsrc;

var tempVal = document.getElementById('text1').value;
document.getElementById('text1').value=document.ge tElementById('text2').value;
document.getElementById('text2').value=tempVal;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="1.gif" id="img1"><br/><br/>
<div align="center"><input type="text" id="text1" value="1"/></div>
</td>
<td>
<img src="2.gif" id="img2"><br/><br/>
<div align="center"><input type="text" id="text2" value="2"/></div>
</td>
</tr>
</table>
<br/>
<input type="button" value="Swap Image" onclick="swap()"/>
</body>
</html>[/HTML]

Regards
Ramanan Kalirajan
Oct 23 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.