Ejercicio generado por IA mejorado

by didacticode

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Mi formulario</title>
    <style>
      /* CSS para establecer el borde rojo alrededor de las imágenes */
      .bordeRojo {
        border: 3px solid red;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="matricula">Matrícula:</label>
      <input
        type="text"
        id="matricula"
        name="matricula"
        pattern="[0-9]{4}-[a-z&&[^aeiou]]{3}"
        required
      />
      <br />
      <label for="tipo">Tipo:</label>
      <select id="tipo" name="tipo">
        <option value="motocicleta">Motocicleta</option>
        <option value="automovil">Automóvil</option>
        <option value="camion">Camión</option>
      </select>
      <br />
      <img
        id="menorEdad"
        src="menorEdad.png"
        alt="Menor de edad"
        width="100" 
        height="100"
        style="display: none"
      />
      <img
        id="mayorEdad"
        src="mayorEdad.png"
        alt="Mayor de edad"
        width="100"
        height="100"
        style="display: none"
      />
      <img
        id="particular"
        src="particular.png"
        alt="Particular"
        width="100"
        height="100"
        style="display: none"
      />
      <img
        id="profesional"
        src="profesional.png"
        alt="Profesional"
        width="100"
        height="100"
        style="display: none"
      />
      <img
        id="rigido"
        src="rigido.png"
        alt="Rígido"
        width="100"
        height="100"
        style="display: none"
      />
      <img
        id="articulado"
        alt="Articulado"
        src="articulado.png"
        width="100"
        height="100"
        style="display: none"
      />
    </form>
    <button id="submitBtn">Mostrar datos</button>
    <div id="resultado"></div>

    <script>
      // Seleccionar los elementos del formulario
      const matricula = document.getElementById("matricula");
      const tipo =...