Images not displaying when drop-down option selected due to appendChild error?

Question

There's 2 files, SignUp and display2. SignUp works perfect, but When an option is selected in the form from a drop-down I want an image to be displayed, but the console is saying appendChild is an issue

  document.addEventListener('DOMContentLoaded', function() {
    // Retrieve the URL parameters containing the data
    const urlParams = new URLSearchParams(window.location.search);
    const encodedData = urlParams.get('data');

      // Decode and parse the data to get the object
      const data = JSON.parse(decodeURIComponent(encodedData));

      // Display user information on the page
      document.getElementById('display-name').textContent = data.name;

    // Create and add the Top Agents' images to the display card
    const displayTopAgentsImages = document.getElementById('display-topAgents-images');
    const agentImageMapping = {
      'Brimstone': 'BrimstoneHead.png',
      'Phoenix': 'BrimstoneHead.png',
      'Sage': 'BrimstoneHead.png',
      'Jett': 'BrimstoneHead.png',
      'Reyna': 'BrimstoneHead.png',

    };

    data.topAgents.forEach(function(agentName) {
      const agentImageSrc = agentImageMapping[agentName] || 'default-agent.jpg'; // Use default image if not found
      const agentImage = document.createElement('img');
      agentImage.setAttribute('src', agentImageSrc);
      agentImage.setAttribute('alt', agentName);
      displayTopAgentsImages.appendChild(agentImage);
    });

    // Show the display-card
    document.getElementById('display-card').style.display = 'block';
  });

Everything displays perfect but the images, they are nowhere and BrimstoneHead.png is in the same directory as the files.

Answer 1

To fix the issue and correctly display the images based on the selected agent from the drop-down, you need to update the agentImageMapping object with the correct image filenames for each agent. Make sure the image filenames are correct and available in the same directory as your HTML and JavaScript files.

For example,

const agentImageMapping = {
  'Brimstone': 'BrimstoneHead.png',
  'Phoenix': 'PhoenixHead.png',
  'Sage': 'SageHead.png',
  'Jett': 'JettHead.png',
  'Reyna': 'ReynaHead.png',
};

Ensure that the image filenames are spelled correctly and match the names used in the data.topAgents array.