Search code examples
javascripteventsqueryselector

HTMLElement: Evento change does´t works


I've used this code on the page and it doesn't work in the browsers I've tried it on. Can you help me correct the error?

<label>Elija un sabor de nieve:
    <select class="nieve" name="nieve">
        <option value="">Seleccione Uno …</option>
        <option value="1">Chocolate</option>
        <option value="2">Sardina</option>
        <option value="3">Vainilla</option>
    </select>
</label>

<div class="resultado"></div>
<script>

const selectElement = document.querySelector('.nieve');
selectElement.addEventListener('change',(event) => {
    const resultado = document.querySelector('.resultado');
    resultado.textContent = 'Te gusta el sabor ${event.target.value';
    });
</script>

This line show an error: "selectElement.addEventListener('change',(event) => {". When selecting an item from the dropdown, it should specify the selected item in text.In Dreamweaver it shows an error on the indicated lines and in Firefox it shows "Do you like the flavor ${event.target.value}".


Solution

  • const selectElement = document.querySelector('.nieve');
    selectElement.addEventListener('change',(event) => { 
        const resultado = document.querySelector('.resultado'); 
      resultado.textContent = `Te gusta el sabor ${event.target.value}`;
    });
    <label>Elija un sabor de nieve:
    <select class="nieve" name="nieve">
        <option value="">Seleccione Uno …</option>
        <option value="1">Chocolate</option>
        <option value="2">Sardina</option>
        <option value="3">Vainilla</option>
    </select>
    <div class="resultado"></div>