javascript onclick event with three functions

Question

javascript onclick event with three functions

Navigation

#1 by (2 votes)
#2 by (-1 votes)
#3 by (-1 votes)

-1

Because only the last function of the addEventListener method of my script is working. I'm developing filters on a DataTable that when I click the fetch button it filters the information into the table. The filter functions are working, but only works individually.

HTML:

<label for="proto">Protocolo</label>
<input type="text" class="form-control" name="proto" id="proto" 
 placeholder="Pesquisar...">

<label for="nome">Nome</label>
<input type="text" class="form-control" name="nome" id="nome"  
placeholder="Pesquisar...">

<label for="doc">Documento</label>
<input type="text" class="form-control" name="doc" id="doc" 
placeholder="Pesquisar...">

<button class="btn btn-primary btn-block" id="btnBuscar">Buscar</button>

Script:

function proto() {
    var proto, filter, table, tr, td, i;
    proto = document.getElementById("proto");
    filter = proto.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }    
    } 
}

function nome() {
    var nome, filter, table, tr, td, i;
    nome = document.getElementById("nome");
    filter = nome.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[3];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }    
    }       
}

function doc() {
    var doc, filter, table, tr, td, i;
    doc = document.getElementById("doc");
    filter = doc.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[4];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }    
    }   
}

document.getElementById("btnBuscar").addEventListener("click", function(){
    proto();
    doc();
    nome();
});

javascript

asked by anonymous 20.10.2017 / 16:58

3 answers

-1

I do not understand very well, you want to assign a click event and call these 3 functions?

If yes

$(botao).click(function () {
  proto();
  nome();
  doc();
});

20.10.2017 / 17:14

-1

You can also direct through HTML

<button onclick="proto();doc();nome()" ...

20.10.2017 / 17:29

Blocking android features [closed] My app does not return the JSON data

score 2 · Accepted Answer

In fact, the 3 are working, as the error-free console shows.

What happens is that regardless of what you did before, the last call will overwrite or delete the value of tr[i].style.display .

What you can do by keeping javascript pure in the functions is to create a function to "reset" everything, cleaning the displays and, consequently, show everything, and then call the functions, which only put display: none , without changing the content when the filter passes.

    function resetFilters() {
        table = document.getElementById("table");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            tr[i].style.display = "";
        }
    }

    function filterByText(filter, tdColumn) {
        table = document.getElementById("table");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[tdColumn];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) === -1) {
                    tr[i].style.display = "none";
                }
            }    
        } 
    }

    function proto() {
        var proto, filter;
        proto = document.getElementById("proto");
        filter = proto.value.toUpperCase();
        filterByText(filter, 0);
    }

    function nome() {
        var nome, filter;
        nome = document.getElementById("nome");
        filter = nome.value.toUpperCase();
        filterByText(filter, 3);
    }

    function doc() {
        var doc, filter;
        doc = document.getElementById("doc");
        filter = doc.value.toUpperCase();
        filterByText(filter, 4);
    }

    document.getElementById("btnBuscar").addEventListener("click", function(){
        resetFilters()
        proto();
        doc();
        nome();
    });