How to return a given array value

Question

I’m with a simple text translator project, where the user digests a certain word, if it exists in the array it returns the second value of the array, for example, the user type LOVE, and its return will be LOVE. However I did not find a way to If he type LOVE the return is LOVE. Follow the script below

//Translate
    (function () {
        //filter
        function setFilter() {
            var result = [];
            var filterOnInput = document.querySelector('.filter_translate').value;
            data.forEach((element) => {
                if (element.q.toString() == filterOnInput) {
                    result.push(element);
                } else if (element.a.toString() == filterOnInput) {

                };
            });

            document.querySelector('.result_translate').innerHTML = result[0]?.a;
            let m = document.querySelector('.result_translate'),
                n = m.textContent;
            if (n == 'undefined') {
                m.innerHTML = '<img src=/image/load-i.gif>';
                m.style.cursor = 'pointer'
            }

            if (filterOnInput == '') {
                m.innerHTML = 'Resultados';
            };
        };

        //Remove load
        onclick = (y) => {
            let a = document.querySelector('.translate__fast'),
                b = document.querySelector('.translate__fast div'),
                c = document.querySelector('.translate__fast h2'),
                d = document.querySelector('.translate__fast h3'),
                e = document.querySelector('.translate__fast p'),
                f = document.querySelector('.translate__fast input');
            if (y.target != a && y.target != b && y.target != c && y.target != d && y.target != e && y.target != f) {
                f.value = '';
                e.innerHTML = 'Resultados';
            }
        };

        //keyup
        function onload() {
            var el = document.querySelector('.filter_translate');

            el.addEventListener('keyup', function (t) {
                setFilter();
                var t = el.value;
                t = t.toLowerCase().replace(/(?:^|\s)\S/g, function (capitalize) {
                    return capitalize.toLowerCase();
                });
                el.value = t;
            }, false);

        };

        onload();
        //Translate Content
        var data = [
            {
                "q": 'abet',
                "a": 'Instigar<audio src="a1.wav"></audio>',
            },
            {
                "q": 'amor',
                "a": 'love<audio src="a1.wav"></audio>',
            },
        ];
    })();

<!-- TRANSLATE -->
        <section class="translate__fast">
            <span class="cor">
                <figure></figure>
            </span>
            <div class="dv_trnaslate_ft">
                <h2>Tradutor</h2>
                <input type="text" class="filter_translate" placeholder="Pesquisar">
                <div class="rr__tr_">
                    <p class="result_translate sounds">Resultados<audio src=""></audio></p>
                </div>
                <p>Um click para ouvir, dois para copiar</p>
            </div>
        </section>

Answer 1

I tweaked the code to work with one language or the other. However, in your array you should not count the audio tag. Not in this way of searching.

In the code I added a check of which language is being searched. If it is one I search the one of the array, if it is another I search the q of the array. I even took the audio tag la from the array.

Look if it can give you a direction for what you need.

//Translate
        (function () {
            //filter
            function setFilter() {
                var result = [];
                var language = 1;
                var filterOnInput = document.querySelector('.filter_translate').value;
                data.forEach((element) => {
                    if (element.q.toString() == filterOnInput) {
                        result.push(element);
                        language = 1;
                    } else if (element.a.toString() == filterOnInput) {
                        result.push(element);
                        language = 2;
                    };
                });

                if(language === 1){
                    document.querySelector('.result_translate').innerHTML = result[0]?.a;
                }
                else if(language === 2) {
                    document.querySelector('.result_translate').innerHTML = result[0]?.q;
                }
                
                let m = document.querySelector('.result_translate'),
                    n = m.textContent;
                if (n == 'undefined') {
                    m.innerHTML = '<img src=/image/load-i.gif>';
                    m.style.cursor = 'pointer'
                }

                if (filterOnInput == '') {
                    m.innerHTML = 'Resultados';
                };
            };

            //Remove load
            onclick = (y) => {
                let a = document.querySelector('.translate__fast'),
                    b = document.querySelector('.translate__fast div'),
                    c = document.querySelector('.translate__fast h2'),
                    d = document.querySelector('.translate__fast h3'),
                    e = document.querySelector('.translate__fast p'),
                    f = document.querySelector('.translate__fast input');
                if (y.target != a && y.target != b && y.target != c && y.target != d && y.target != e && y.target != f) {
                    f.value = '';
                    e.innerHTML = 'Resultados';
                }
            };

            //keyup
            function onload() {
                var el = document.querySelector('.filter_translate');

                el.addEventListener('keyup', function (t) {
                    setFilter();
                    var t = el.value;
                    t = t.toLowerCase().replace(/(?:^|\s)\S/g, function (capitalize) {
                        return capitalize.toLowerCase();
                    });
                    el.value = t;
                }, false);

            };

            onload();
            //Translate Content
            var data = [
                {
                    "q": 'abet',
                    "a": 'instigar',
                },
                {
                    "q": 'amor',
                    "a": 'love',
                },
            ];
        })();

    <!-- TRANSLATE -->
            <section class="translate__fast">
                <span class="cor">
                    <figure></figure>
                </span>
                <div class="dv_trnaslate_ft">
                    <h2>Tradutor</h2>
                    <input type="text" class="filter_translate" placeholder="Pesquisar">
                    <div class="rr__tr_">
                        <p class="result_translate sounds">Resultados<audio src=""></audio></p>
                    </div>
                    <p>Um click para ouvir, dois para copiar</p>
                </div>
            </section>