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....
-
-
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.getEle mentById('myTex t').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 -
Originally posted by RamananKaliraja n
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.Comment
-
I have done with two images and two text boxes, try for three things by yourself. any doubts just post it in the forum.Originally posted by dmf1207
[HTML]<html>
<head>
<script type="text/javascript">
function swap()
{
var tempsrc = document.getEle mentById('img1' ).src;
document.getEle mentById('img1' ).src=document. getElementById( 'img2').src;
document.getEle mentById('img2' ).src=tempsrc;
var tempVal = document.getEle mentById('text1 ').value;
document.getEle mentById('text1 ').value=docume nt.getElementBy Id('text2').val ue;
document.getEle mentById('text2 ').value=tempVa l;
}
</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 KalirajanComment
Comment