I have a “wrapper”, that selects an option from the dropdown and replaces the text from “texto-span”. Until that point, everything is fine. I want to know how to show on screen an img from that option the I selected.
For this exemple, I choose the <span class="spanLi" id="1">AUDI / A3 Sportback</span>, and want to show an img of it on another div on screen.
const optionMenu = document.querySelector(".wrapper"),
selectBtn = optionMenu.querySelector(".select-btn-span"),
options = optionMenu.querySelectorAll(".opcao"),
spanText = optionMenu.querySelector(".texto-span");
selectBtn.addEventListener('click', () => optionMenu.classList.toggle('active'));
options.forEach(opcao => {
opcao.addEventListener('click', () => {
let opcaoSelecionada = opcao.querySelector(".spanLi").innerText;
spanText.innerText = opcaoSelecionada;
optionMenu.classList.remove('active');
})
});<div class="select-btn">
<div class="select-btn-span">
<span class="texto-span">Escolha o Veículo</span>
<img class="seta-baixo" src="../imagens/seta-para-baixo.png" width="15px" height="15px">
</div>
<div class="conteudo-marcas">
<ul class="lista-marcas">
<li class="opcao">
<span class="spanLi" id="1">AUDI / A3 Sportback</span>
</li>
</ul>
</div>
</div>
New contributor
Lucas Akira is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.