Show image depending on <option value> in a <select> element-CodePudding

I've been struggling for the last 2 days to create an option when a user clicks the button "submit" after they selected a value from a "select>" element, the website to show an image.

        <label for="cars" id="carInput" name="carInput">
        <select id="modelsList">
            <option value="mba">Mercedes-Benz A Class</option>
            <option value="mbc">Mercedes-Benz C Class</option>
            <option value="mbe">Mercedes-Benz E Class</option>
            <option value="mbs">Mercedes-Benz S Class</option>
            <option value="mbeq">Mercedes-Benz EQE Class</option>
            <option value="mbeqs">Mercedes-Benz EQS Class</option>
        </select>
        <button id="btn">submit</button>

I tried something like this in Javascript, but everytime I click the submit button it adds a new image and I really dont want that, I want the image to change everytime a value is chosen.

document.querySelector('#btn').addEventListener('click', submit);
    function submit() {
        let select = document.querySelector('#modelsList');
        let value = select.options[select.selectedIndex].value;
        let container = document.querySelector('.container');
 
  const aImg = document.createElement("img");
  const cImg = document.createElement("img");
  const eImg = document.createElement("img");
  const sImg = document.createElement("img");
  const eqImg = document.createElement("img");
  const eqeImg = document.createElement("img");
  aImg.src = "https://ag-spots-2021.o.auroraobjects.eu/2021/07/26/mercedes-amg-cla-45-c117-c479326072021173956_1.jpg?1627314027"
  cImg.src = "https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjM1bXk3dTVtcTd1OC1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.dxCeoriV-0ygVtEXaXgFFvuomnzNmndAS1G5qVVYqaM/image;s=1080x720"
  eImg.src = "https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjdjYzZ2cm84NjNrcS1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.5PJ743A4FPdZuZkRpYhJh9g96i1AASth2X4nBJXS0oU/image;s=644x461"
  sImg.src = "https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6InM1NnM5ZndkYTR4dC1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.1N_EW-jPwI1Q33sSuwaIdYxTexUdYAHcWgEFYCPqkrU/image;s=1080x720"
  eqImg.src = "https://www.cars-data.com/pictures/mercedes/mercedes-benz-g-class_4266_24.jpg"
  eqeImg.src = "https://mercedesblog.com/wp-content/uploads/2019/06/mercedes-eqe.jpg"

     if (value === 'mba') {
         container.appendChild(aImg);
     } else if (value === 'mbc') {
         container.appendChild(cImg)
    } else if (value === 'mbe') {
         container.appendChild(eImg);
     } else if (value === 'mbs') {
         container.appendChild(sImg);
     } else if (value === 'mbeq') {
         container.appendChild(eqImg);
     } else {
         container.appendChild(eqeImg);
     }
 }

And 1 more bonus question: how to actually inject a whole div container with 3 flex childrens(a img, paragraph and a small div) when the submit button is clicked?

CodePudding user response：

Try removing all child nodes from the container first:

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}
const container = document.querySelector('#container');
removeAllChildNodes(container);

CodePudding user response：

You can remove everything from the container before appending :

function submit() {
        let select = document.querySelector('#modelsList');
        let value = select.options[select.selectedIndex].value;
        let container = document.querySelector('.container');
        container.innerHTML = '';
[...]

or you can change src of image without appending new image

document.querySelector('#btn').addEventListener('click', submit);

const images = {
    mba:'https://ag-spots-2021.o.auroraobjects.eu/2021/07/26/mercedes-amg-cla-45-c117-c479326072021173956_1.jpg?1627314027',
    mbc:'https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjM1bXk3dTVtcTd1OC1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.dxCeoriV-0ygVtEXaXgFFvuomnzNmndAS1G5qVVYqaM/image;s=1080x720',
    mbe:'https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjdjYzZ2cm84NjNrcS1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.5PJ743A4FPdZuZkRpYhJh9g96i1AASth2X4nBJXS0oU/image;s=644x461',
    mbs:'https://www.cars-data.com/pictures/mercedes/mercedes-benz-g-class_4266_24.jpg',
    mbeq:'https://www.cars-data.com/pictures/mercedes/mercedes-benz-g-class_4266_24.jpg',
    default:'https://mercedesblog.com/wp-content/uploads/2019/06/mercedes-eqe.jpg'
}

function submit() {
    let select = document.querySelector('#modelsList');
    let value = select.options[select.selectedIndex].value;
    let container = document.querySelector('.container');

    const img = document.querySelector('#img');

    if(images.hasOwnProperty(value)) {
        img.setAttribute('src', images[value]);
    } else {
        img.setAttribute('src', images.default);
    }
}

<label for="cars" id="carInput" name="carInput"/>
<select id="modelsList">
    <option value="mba">Mercedes-Benz A Class</option>
    <option value="mbc">Mercedes-Benz C Class</option>
    <option value="mbe">Mercedes-Benz E Class</option>
    <option value="mbs">Mercedes-Benz S Class</option>
    <option value="mbeq">Mercedes-Benz EQE Class</option>
    <option value="mbeqs">Mercedes-Benz EQS Class</option>
</select>
<button id="btn">submit</button>
<div >
    <img id="img"/>
</div>

CodePudding user response：

I suggest changing about the way you think of the relationship between the HTML and the JS. The former is the presentation layer, the latter is the logic layer. It makes little sense to include presentation information in your business logic, if you can help it. Right now, if you want to make changes to the way this select works (for example, adding new images or changing existing images) you have to change the JS as well as the HTML.

You could change your code to the following:

document.querySelector('#btn').addEventListener('click', submit);
    function submit() {
        let select = document.querySelector('#modelsList');
        let value = select.options[select.selectedIndex].value;
        let containerImg = document.querySelector('#container-img');

        containerImg.hidden = false;
        containerImg.src = value;
 }

This allows you to add any number of future image options without having to touch the code. This makes some assumptions about the HTML. You would have to change it like this:

<label for="cars" id="carInput" name="carInput">
<select id="modelsList">
        <option value="image1.png">Mercedes-Benz A Class</option>
        <option value="image2.png">Mercedes-Benz C Class</option>
</select>
<button id="btn">submit</button>
</label>
<div >
        <img hidden src="" id="container-img" />
</div>

CodePudding user response：

Add this div element.

<div id="container"></div>

Change container variable.

let container = document.getElementById('container');

Add innerHTML method before your if statement.

 container.innerHTML=""; //<-------------- This will clear your div before appending your new image 
 if (value === 'mba') {         //Note: I have not changed the if statement
     container.appendChild(aImg);
 } else if (value === 'mbc') {
     container.appendChild(cImg)
} else if (value === 'mbe') {
     container.appendChild(eImg);
 } else if (value === 'mbs') {
     container.appendChild(sImg);
 } else if (value === 'mbeq') {
     container.appendChild(eqImg);
 } else {
     container.appendChild(eqeImg);
 }