Lists in HTML5 and JS [closed]

I would like to help you, first you should guide me in your doubt.

• First: I assume that the images are in a folder located in the same directory as the html document.

• Second: somehow you must relate the option to each image, either by the text of the li (the image corresponding to li with id= action1 should be called ferrari.jpg ), or with some attribute of the element li (Example id='action' data='Ferrari' )

• Third: create a div to add the corresponding images and assign a id

• You must associate an event handler with the li elements of your document using addeventlistener , for example:

  document.getElementsByTagName("LI").addEventListener("click", function()
  {
       //aquí, en el cuerpo de la función agregaríamos las imágenes al div 
       // mencionado en el tercer item
  });
  

• Fourth: you create an element img and assign the property src with the related image (here it depends on how you get the name of the image, what attribute of li you get, the attribute data or the text of li ) (this is where I have a doubt, since I use jquery and I am not sure that the syntax is correct, in the body of the function of the previous point you must obtain the element where the property was clicked what interests you, example:

  var nombreImagen=this.getAttribute("data")+".jpg";
  
  var elem = document.createElement("img");
  
  elem.setAttribute("src", nombreImagen);
  

• fifth: you get the div element by its id and you add a child node created before document.getElementById("idDivPunto3").appendChild(elem);

  I hope it serves to guide you, all the code I did in the air. I think it is a way to reach your goal, surely they will make corrections that will serve you.

I finished it. I leave the code in case it serves someone:

function imagen(valor){
    if(valor === 'ferrari'){
        document.getElementById('carro').innerHTML = '<img src="img/ferrari.jpg" alt="Ferrari"/>';
    }
    else if(valor === 'mercedes'){
        document.getElementById('carro').innerHTML = '<img src="img/mercedes.jpg" alt="Mercedes"/>';
    }
    else if(valor === 'lamborghini'){
        document.getElementById('carro').innerHTML = '<img src="img/lambo.jpg" alt="Lamborghini"/>';
    }
    else if(valor === 'mclaren'){
        document.getElementById('carro').innerHTML = '<img src="img/mclaren.jpg" alt="McLaren"/>';
    }
    else if(valor === 'tesla'){
        document.getElementById('carro').innerHTML = '<img src="img/tesla.jpg.jpg" alt="Tesla"/>';
    }
    else{
        document.getElementById('carro').innerHTML = '<img src="" alt=""/>';
    }
}

<header>
  <h1>Carros</h1>
</header>
<form>
    <fieldset style="text-align: center;">
    <legend>Selecciona un carro para verlo.</legend>
    <p>
        <label accesskey="C">
            Carros:<br>
            <select name="carros" required size="6" onchange="imagen(this.value)">
                <option value="0" selected="selected">Seleccione</option>
                <option value="ferrari">Ferrari F40</option>
                <option value="mercedes">Mercedes SLR</option>
                <option value="lamborghini">Lamborghini Veneno</option>
                <option value="mclaren">McLaren P1</option>
                <option value="tesla">Tesla Hypercar</option>
            </select>
        </label>
    </p>
    <br>
    <div id="carro">
  </div>
  </fieldset>
</form>

According to your answer so that there are not so many nested if you might want to use a switch

function imagen(valor){
   var val = valor;
   switch(val){
      case 'tesla':
      document.getElementById('carro').innerHTML = '<img src="img/mercedes.jpg" alt="Mercedes"/>';
      break;
      case 'mclaren':
      document.getElementById('carro').innerHTML = '<img src="img/mclaren.jpg" alt="McLaren"/>';
      break;
      default:
      document.getElementById('carro').innerHTML = '<img src="" alt=""/>';
      break;
   }
}