将用户输入连接到 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];
     }
 }