JSFiddle - React, Tailwind, and code Playground

by chayacooper

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>

JavaScript

var NumberOfImages = 3 - 1; //-1 because array members starts from 0
 var trendy = new Array(NumberOfImages);
 trendy[0] = "files/set1/A1.jpg" + '|' + "black_dress";
 trendy[1] = "files/set1/B1.jpg" + '|' + "jeans & leather jacket";
 trendy[2] = "files/set1/C1.jpg" + '|' + "cream top & red pants";
 var imgNumber = 1; //array key of current image

 var NumberOfImages = 3 - 1; //-1 because array members starts from 0
 var classic = new Array(NumberOfImages);
 classic[0] = "files/set1/A2.png" + '|' + "print dress";
 classic[1] = "files/set1/B2.jpg" + '|' + "jeans & blazer";
 classic[2] = "files/set1/C2.jpg" + '|' + "cream top & cream pants";
 var classicNumber = 1; //array key of current image

 var text = 3 - 1; //-1 because array members starts from 0
 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; //array key of current image  

    var alt = $("#imgtrendy").attr("alt");    
    var alt = $("#imgclassic").attr("alt");

    var bothTrendy = trendy[index].split('|');
    var bothClassic = classic[index].split('|');

 function manipulateDOM() {
   changeObjects();
   NextImage();
 }

 function changeObjects() {
   document.getElementById("question").innerHTML = text[textNumber];
   var imgvalue = $("#imgtrendy").attr("alt");
   $("#picval").text(imgvalue);
 }

 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++;
    ...