Подключение пользовательского ввода к значению DOM

Question

Как я могу подключить кнопку, которая остается постоянной, со значением DOM, чтобы захватить выбор пользователя?

Я создаю опросник вкуса, в котором пользователям предлагается выбрать стиль, который они предпочитают, из серии пар, и конкретные показанные пары будут меняться в зависимости от ранее выбранных элементов. Мне бы хотелось, чтобы кнопки «Выбрать» под каждым набором оставались постоянными, чтобы не нужно было обновлять всю страницу для каждого изображения.

HTML

<table>                          
<tr><td id="question" colspan=5 > Question 1</td></tr> 
<tr><td >
<img src="files/z1.png" name="taste" value="trendy[1]" />
</td> <td  >
<img src="files/z2.png" name="taste1" value="classic[1]"/>
</td> </tr> 
<tr><td >  
<img alt"Select" src="files/Select.jpg" onclick="javascript:manipulateDOM()"> 
</td><td  >
<img alt"Select" src="files/Select.jpg" onclick="javascript:manipulateDOM1()"> 
</td></tr></table>      

Javascript для определения того, какое изображение отображается на основе пользовательского ввода

 var NumberOfImages = 7 - 1; //-1 because array members starts from 0
 var trendy = new Array(NumberOfImages);
 trendy[0] = "files/z1.png";
 trendy[1] = "files/z1.png";
 trendy[2] = "files/z14.png";
 trendy[3] = "files/z4.png";
 trendy[4] = "files/z5.png";
 trendy[5] = "files/z6.png";
 trendy[6] = "files/z9.png";
 var imgNumber = 1; //array key of current image
 var NumberOfImages = 7 - 1; //-1 because array members starts from 0
 var classic = new Array(NumberOfImages);
 classic[0] = "files/z2.png";
 classic[1] = "files/z2.png";
 classic[2] = "files/z12.png";
 classic[3] = "files/z3.png";
 classic[4] = "files/z3.png";
 classic[5] = "files/z7.png";
 classic[6] = "files/z8.png";
 var classicNumber = 1; //array key of current image
 var text = 6 - 1; //-1 because array members starts from 0
 var text = new Array;
 text[0] = "Question 1"
 text[1] = "Question 2"
 text[2] = "Question 3"
 text[3] = "Question 4"
 text[4] = "Question 5"
 text[5] = "Question 6"
 text[6] = "Question 7"
 var textNumber = 1; //array key of current image    
 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
     {
         trendy[0] = trendy[1]; trendy[1] = trendy[2]; trendy[2] = trendy[3]; trendy[2] = trendy[3]; trendy[3] = trendy[4]; trendy[4] = trendy[5]; trendy[5] = trendy[6];
         document.images["taste"].src = trendy[imgNumber];
         classic[0] = classic[1]; classic[1] = classic[2]; classic[2] = classic[3]; classic[3] = classic[4]; classic[4] = classic[5]; classic[5] = classic[6];
         document.images["taste1"].src = classic[imgNumber];
         text[0] = text[1]; text[1] = text[2]; text[2] = text[3]; text[3] = text[4]; text[4] = text[5]; text[5] = text[6];
         document.getElementById["question"].innerHTML = text[textNumber];
     }
 }
 function manipulateDOM1() {
     changeObjects();
     NextImage1();
 }
 function NextImage1() {
     if (imgNumber < NumberOfImages) //Stop moving forward when we are out of images
     {
         trendy[0] = trendy[1]; trendy[1] = trendy[2]; trendy[2] = trendy[3]; trendy[2] = trendy[3]; trendy[3] = trendy[4]; trendy[4] = trendy[5]; trendy[5] = trendy[6];
         document.images["taste"].src = trendy[imgNumber];
         classic[0] = classic[1]; classic[1] = classic[2]; classic[2] = classic[3]; classic[3] = classic[4]; classic[4] = classic[5]; classic[5] = classic[6];
         document.images["taste1"].src = classic[imgNumber];
         text[0] = text[1]; text[1] = text[2]; text[2] = text[3]; text[3] = text[4]; text[4] = text[5]; text[5] = text[6];
         document.getElementById["question"].innerHTML = text[textNumber];
     }
 }