'Images from array not showing up

I am trying to build a car configurator app. The premise is as follows: Images of the car are placed in an array. The user is first presented with a pre-set image of the car. The user has to click on their desired color and rim, triggering a change in [my defined JavaScript] flags for each case thus changing the original car image. A function that returns the specific image, depending on which flags are set via the respective setFlag functions, is called. I tried numerous ways to retrieve the images, yet no matter what I do, only the original image stays displayed.

My JS code:

const imageArrayWhite=["./Aura_Config_Images/ASFlashBlueW.png","./Aura_Config_Images/ASEurosRedW.png"];
const imageArrayBlack=["./Aura_Config_Images/ASEurosRedB.png"];

document.addEventListener("load",imageChanger);

var WhiteFlag=false;
var BlackFlag=true;
var EurosRedFlag=true;
var FlashBlueFlag=false;

var carImageID=document.getElementById("carImage");

function setEurosRedFlag(){
    EurosRedFlag=true;
    FlashBlueFlag=false;
}

function setFlashBlueFlag(){
    EurosRedFlag=false;
    FlashBlueFlag=true;
}

function setWhiteFlag(){
    WhiteFlag=true;
    BlackFlag=false;
}

function setBlackFlag(){
    WhiteFlag=false;
    BlackFlag=true;
}

function imageChanger(){
    // var runner=true;
    // while(runner=true){
    for(var imageW of imageArrayWhite){
        if(WhiteFlag=="true" && EurosRedFlag=="true"){
            imageW=imageArrayWhite[1];
            carImageID.src=imageW;
        }
        if(WhiteFlag=="true" && FlashBlueFlag=="true"){
            imageW=imageArrayWhite[0];
            carImageID.src=imageW;
        }
    }
    for(var imageB of imageArrayBlack){
        if(BlackFlag=="true" && EurosRedFlag=="true"){
            imageB=imageArrayBlack[0];
            carImageID.src=imageB;
        }
    }

}
//}

My HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Vue Automotive - Aura Configurator</title>
  <link rel="stylesheet" type="text/css" href="CSS\Vue.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
  <meta name = 'viewport' content='width=device-width, initial-scale=1'>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <!-- Upper Logo image -->

  <img src="Images/VueLogW7.png" class="headimage">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <hr>

<!-- Upper navigation bar -->
<nav class="nav2">
  <ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link" href="index.php">HOME</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="about.html">ABOUT US</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="products.html">PRODUCTS</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="contact.html">CONTACT US</a>
  </li>
</ul>
</nav>
<!--Dynamic Image div-->
<div class="exterior_image_div">
    <img class="exterior_image" src="Aura_Config_Images\ASEurosRedB.png" id="carImage">
</div>
<!--Ecterior options div-->
<div class="exterior_options_div">
<!--Color div-->
  <h2 style="font-family: Ubuntu"> Color </h2>
    <div class="grid_container_colors">
      <a class="color_link" href="#" onclick="setFlashBlueFlag(), imageChanger()">
      <div class="grid_color_1">
        <img src="Aura_Config_Images\CFlashBlue.png" class="grid_color_image" id="flashBlue" type="radio">
        <p>Flash Blue</p>
      </div>
      </a>
      <a class="color_link" href="#" onclick="setEurosRedFlag(), imageChanger()">
      <div class="grid_color_2">
        <img src="Aura_Config_Images\CEurosRed.png" href="#" class="grid_color_image" id="eurosRed" type="radio" checked>
        <p>Euros Red</p>
      </div>
      </a>
    </div>
  <!--Rim div-->
    <h2 style="font-family: Ubuntu"> Rim </h2>
    <div class="grid_container_colors">
      <a class="color_link" href="#" onclick="setWhiteFlag(), imageChanger()">
      <div class="grid_color_1">
        <img src="Aura_Config_Images\RimW1.png" class="grid_color_image" id="whiteRim" type="radio">
        <p>18" Six-Spoke (Silver)</p>
      </div>
      </a>
      <a class="color_link" href="#" onclick="setBlackFlag(), imageChanger()">
      <div class="grid_color_2">
        <img src="Aura_Config_Images\RimB1.png" href="#" class="grid_color_image" id="blackRim" type="radio" checked>
        <p>18" Six-Spoke (Black)</p>
      </div>
    </div>
</div>
<script type="text/javascript" src="JavaScript/Aura_Config_JS_1.js"></script>
</body>
</html>

I tried accessing the array via different loop types and adding extra functionality to the functions, to no avail.

Image of my webpage: Configurator page

Any help would greatly be appreciated. Sorry for replying late but I'll be off to bed for tonight.

javascripthtmlarraysloopsfor-loop


Solution 1:[1]

Maybe you could try refactoring your code changing this

function setFlashBlueFlag(){
    EurosRedFlag=false;
    FlashBlueFlag=true;
}

to this:

function setFlashBlueFlag(){
        EurosRedFlag=false;
        FlashBlueFlag=true;
        imageChanger();
    }

(and the same to the other functions), and this:

onclick="setEurosRedFlag(), imageChanger()"

to this:

onclick="setEurosRedFlag()"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Catalina Zecchin

Related Questions