boa noite, fiz um código que quando eu digito bmw no input ele me retorna umas imagem, mas fiquei em duvida se essa a forma correta de escrever o código
HTML, se eu tiver que colocar mais 10 foto eu vou ter que colocar mais 10 comando?, teria alguma forma mais fácil de fazer isso?
<div id='imagem' class='container'>
<img id='bmw-1' src=''>
<img id='bmw-2' src=''>
<img id='bmw-3' src=''>
<img id='bmw-4' src=''>
<img id='bmw-5' src=''>
<img id='bmw-6' src=''>
<img id='bmw-7' src=''>
</div>
JS
let botao = document.getElementById('button');
var bmw1 = document.getElementById('bmw-1');
var bmw2 = document.getElementById('bmw-2');
var bmw3 = document.getElementById('bmw-3');
var bmw4 = document.getElementById('bmw-4');
var bmw5 = document.getElementById('bmw-5');
var bmw6 = document.getElementById('bmw-6');
var bmw7 = document.getElementById('bmw-7');
botao.addEventListener('click', () =>{
var input = document.getElementById('input').value;
if(input == 'bmw'){
bmw1.src = 'bmw.jpg';
bmw2.src = 'bmw-2.jpg';
bmw3.src = 'bmw-3.jpg';
bmw4.src = 'bmw-4.jpg';
bmw5.src = 'bmw-5.jpg';
bmw6.src = 'bmw-6.jpg';
bmw7.src = 'bmw-7.jpg';
}
});