Three.js : change texture at runtime

Question

I'm creating an UI in which the user will be able to change the texture of the selected object by clicking on the desired textures picture.

The problem is that I can only use the last texture added in the array.

Here is my php which lists the textures in my specified folder:

<ul id="textureH">
    <script type="text/javascript">
      texArray = [];
    </script>
    <?php
    for($index=0; $index < $indexCount; $index++) {
        $extension = substr($dirArray[$index], -3);

        if ($extension == 'jpg'){
            $texName = $dirArray[$index];
            $texId = "texture". $index;
            ?>

        <script type="text/javascript">
            var texName = '<?php echo $texName ?>';
            var texId = '<?php echo $texId ?>';

            texArray.push(texId);
        </script>
            <?php
            echo "<li id='".$texId."'><table><tr><td><img class='texture-image-list' src='img/" . $texName . "' alt='Image' /></td><td><span id='texture-item-name'>" . $texName . "</span></td></tr></table></li>";
        }   
    }
    ?>
</ul>

And here's my function:

var uTexture = document.getElementById(texId);
uTexture.addEventListener("click", updateTexture, false);
function updateTexture(){
  var texMap = "./img/" + texName;

  for (var i in texArray) {
    if ((texArray[i] == texId) && (SELECTED instanceof THREE.Mesh)) {
      SELECTED.material.map = THREE.ImageUtils.loadTexture(texMap);
      SELECTED.material.needsUpdate = true;
    }
  }
}

I think the problem comes from the array.

Answer 1

Thanks to 2pha I could achieve what I wanted to do.

Here's my new code: (The php/html)

<div class="right-panel-textures">
<h3 id="cat-hierarchy">Textures</h3>
<?php
    $myDirectory = opendir('img/textures');

    while($entryName = readdir($myDirectory)) {
        $dirArray[] = $entryName;
    }
    sort($dirArray);
    closedir($myDirectory);
    $indexCount = count($dirArray);
?>

<ul id="textureH">              
    <?php
    for($index=0; $index < $indexCount; $index++) {
        $extension = substr($dirArray[$index], -3);
        $texName = $dirArray[$index];
        $texId = "texture". $index;
        if ($extension == 'jpg'){
            ?>

        <script type="text/javascript">
            var texName = '<?php echo $texName ?>';
            var texId = '<?php echo $texId ?>';
        </script>

        <?php
            echo "<li class='texture-single-item' data-texture-name='".$texName."' data-texture-id='".$texId."' id='texture-single-item'><table><tr><td><img class='texture-image-list' src='img/textures/" . $texName . "' alt='Image' /></td><td><span id='texture-item-name'>" . $texName . "</span></td></tr></table></li>";
        }   
    }
    ?>
</ul>
</div>

(And the JavaScript)

var uTexture = document.getElementById("texture-single-item");
uTexture.addEventListener("click", updateTexture, false);
function updateTexture(){
    $(".texture-single-item").bind("click", function(event) {

      var nameT = $(this).attr("data-texture-name");
        if (SELECTED instanceof THREE.Mesh) {
          var texMap = "./img/textures/" + nameT;

          SELECTED.material.map = THREE.ImageUtils.loadTexture(texMap);
          SELECTED.material.needsUpdate = true;
        }
    });
}

Thank you :)