Question

How can I modify this script to capture the ‘alt’ attribute for the images a user selects in a slideshow?

This code displays a series of 20 pairs of images and asks users to select their preferences. Each time the user clicks one of the ‘Select’ buttons, the ‘manipulateDOM()’ function advances to the next set of items in the the text and image arrays. However, since it’s not set up as a typical form field, I’m having difficulty figuring out how to capture the value of each selection so that it can be submitted to the database with the rest of the form values.

I tried creating a function with the click() method to (at the very least) capture the src value, but I can’t get the syntax right so that it can run in conjunction with the ‘manipulateDOM()’ function. I’d also much rather capture the ‘alt’ attribute, but I couldn’t figure out how to do that.

Function I was experimenting with:

 $(document).ready(function () {
     $("#buttons").click(function () {           
         var imgvalue = $("#imgtrendy").attr("src");
         $("#picval").text(imgvalue);
         document.write(imgvalue + ', ');
     });
 });

Existing Code:

Javascript – manipulateDOM() and manipulateDOM1() functions

 var NumberOfImages = 3 - 1; //-1 because array members starts from 0
 var trendy = new Array(NumberOfImages);
 trendy[0] = "files/set1/A1.jpg"; 
 trendy[1] = "files/set1/B1.jpg"; 
 trendy[2] = "files/set1/C1.jpg";
 var imgNumber = 1; //array key of current image

 var NumberOfImages = 3 - 1;
 var classic = new Array(NumberOfImages);
 classic[0] = "files/set1/A2.png"; 
 classic[1] = "files/set1/B2.jpg"; 
 classic[2] = "files/set1/C2.jpg";
 var classicNumber = 1;

 var text = 3 - 1;
 var text = new Array;
 text[0] = "Which would you be more likely to wear?"
 text[1] = "Which look is more you?"
 text[2] = "Which would you rather wear?"
 var textNumber = 1;   

function manipulateDOM() {
     changeObjects();
     NextImage();
 }
 function changeObjects() {
     document.getElementById("question").innerHTML = text[textNumber];     
 }   
 function NextImage() {
     if (imgNumber < NumberOfImages) //Stop moving forward when we are out of images
     {
         imgNumber++;
         document.images["taste"].src = trendy[imgNumber];
         document.images["taste1"].src = classic[imgNumber];
         textNumber++;  
         document.getElementById["question"].innerHTML = text[textNumber];
         document.getElementById["selectButton"].innerHTML = text[textNumber];
     }   
 }    
 function manipulateDOM1() {
     changeObjects();
     NextImage1();
 }
 function NextImage1() {
     if (imgNumber < NumberOfImages)
     {
         imgNumber++;
         document.images["taste"].src = trendy[imgNumber];
         document.images["taste1"].src = classic[imgNumber];
         textNumber++;  
         document.getElementById["question"].innerHTML = text[textNumber];
         document.getElementById["selectButton"].innerHTML = text[textNumber];
     } 
 } 

HTML

<form id="taste" name="taste" method="post" action="taste-exec.php" >
<h2 id="question"> Which would you be more likely to wear?</h2>
<table><tr>
   <td><img id="imgtrendy" src="files/set1/A1.jpg" name="taste" value="trendy[1]" /></td>
   <td><img id="imgclassic" src="files/set1/A2.png" name="taste1" value="classic[1]"  /></td></tr>
<tr id="buttons">
   <td><img id="trendyButton" alt"Select" src="files/Select.jpg" onclick="javascript:manipulateDOM()"></td>
   <td ><img id="classicButton" alt"Select" src="files/Select.jpg" onclick="javascript:manipulateDOM1()"></td> 
</tr><tr>
   <td id="picval"></td>
   <td><input name="answer" id="answer" type="text" /></td>
</tr></table>
</form>  

Answer 1

You get the alt attribute using also the attr method and alt as parameter, just like you are already doing with src. You could try:

 function changeObjects() {
     document.getElementById("question").innerHTML = text[textNumber];     

     var imgvalue = $("#imgtrendy").attr("alt");
     $("#picval").text(imgvalue);
 }   

Edit: Example of keeping data in one single array

//to save it
var alt = $("#imgtrendy").attr("alt");
var fileName= 'someValue';//populate accordingly
var myArray[index] = alt + '|' + fileName;
//to retrieve it
var bothValues = myArray[index].split('|'); //gives you an array
alt = bothValues[0] //contains alt at index 0
fileName = bothValues[1] //contains fileName at index 1