Perform JS datalist value operation

Asked

Viewed 83 times

1

I got a problem: the JS code it can take the value of the datalist and return through an Alert the selected item, but I need to do functions for each operation, IE, I need JS to interpret which item I selected and make the function of the corresponding item.

Example: I selected ADDITION >>> Show by an Alert the selected item and perform the sum of 2 values.

 let input = document.getElementById('txt-busca');
    input.addEventListener('input', function(evt) {
        let selector = document.querySelector('option[value="'+this.value+'"]');
        if ( selector ) {
            input.setAttribute('value', selector.getAttribute('data-value'));
            alert(this.value);
        }
    }, false);

    var pesquisar = document.getElementById('btn-pesquisar');
    pesquisar.addEventListener('click', function() {
        location.href = "https://www.w3schools.com";
    });
.busca{
    left: 50%;
    transform: translateX(-50%);
    top: 100px;
    width: 310px;
    border-radius: 15px;
    position: absolute;
    border:solid 1px var(--cor-text);
    background-color: gray;
}

.busca:hover {
    transition: 1s;
    border:solid 1px var(--cor-efeito);
}

#txt-busca {
    height:32px;
    width:260px;
    font-size: 0.8rem;
    padding-left: 12px;
    float:left;
    border:none;
    font-family: 'Cardo', serif;
    background-color:transparent;
    color: white;
}

.busca img {
    width: 25px;
    height: 25px;
    line-height: 32px;
    padding: 2px 0 0 2px;
    cursor: pointer;
}
<div class="busca">
            <input type="text" id="txt-busca" placeholder="Pesquisar Conteúdo..." list="historico"/>
            <button id="btn-pesquisar" style="width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0); border: none;"><img src="https://img.icons8.com/fluent/48/000000/search-in-browser.png"  id="btn-busca" alt="buscar" /></button>
        </div>
        
<datalist id="historico" id="lista_conteudos" >
        <option data-value="1" value="ADIÇÃO">Na adição uma quantidade é somada de outra.</option>
        <option data-value="2" value="SUBTRAÇÃO">Na subtração uma quantidade é retirada de outra.</option>
</datalist>

1 answer

1

SIMPLY ADD A SWITCH CASE AND A CONST VARIABLE BY STORING THE VALUE

        let input = document.getElementById('txt-busca');
        input.addEventListener('input', function(evt) {
            let selector = document.querySelector('option[value="'+this.value+'"]');
            if ( selector ) {
                input.setAttribute('value', selector.getAttribute('data-value'));


                const repart = this.value;
                alert(repart);
                switch (repart) {
                    case 'ADIÇÃO':
                        alert('ADIÇÃO);
                        break;
                    case 'SUBTRAÇÃO':
                        alert('SUB);
                        break;
                    default:
                        alert(`Sorry, we are out of ${repart}.`);
                }


            }
        }, false);

Browser other questions tagged

You are not signed in. Login or sign up in order to post.