javascript onclick event with three functions

Asked

Viewed 455 times

-1

Pq is only working the last function of the addeventlistener method in my script. I’m developing filters in a Datatable that when I click the search button it filters the information in the table. Filter functions are working, but only work 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
  • 1

    Leandro the call for the 3 functions is correct, check the console of your browser if no error is displayed, try adding html to your question so we can test the functions :)

  • @Caiqueromero I inserted Html, in the console shows no error.

  • explain exactly your mistake and what is happening, add the question, if possible attach an image with what is happening and what should happen please

  • @Guilhermecostamilam Then I have no way to inform you the error because not the error in the console, simply the button does not filter the table with the click of the button.

  • There is an error in the console?

  • @Guilhermecostamilam It didn’t happen No, it’s the same thing.

Show 1 more comment

3 answers

2


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, keeping the javascript pure in the functions, is create a function to "reset" everything, cleaning the displays and, consequently, show everything, and then call the functions, which only put the display: none, without changing the contents when the filter is passed.

    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();
    });

  • your worked there? Here with me it happened that only the last function called, ie name() applied the filter the other not.

  • I didn’t get to test, I don’t have the table ready, but I edited because I found errors in my modification, see if it goes now

  • Perfect man, worked right, thank you so much for your help!

-1

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

If yes 

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

  • So I’ve tested with jQuery and javascript and it doesn’t work.

  • I don’t really understand what you want, and what your mistake is

  • I want when I go to the protocol filter input and press the button the table shows the filter result in the table, ok, this already works if it is only with the proto() function, but if I go in the name input and enter a name, in the table nothing happens, the name() function, does not perform.

  • So what I’ve been through doesn’t solve your problem, sorry.

  • that this man, need not ask for forgiveness no, tried to help, this is already very cool.

-1

You can also do direct by HTML

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

  • I’ve tried it straight into html, it doesn’t work.

  • This code acts as a filter that traverses the table and arrow display: none on lines that are unrelated to the filter, right? I’m not sure but I believe the 3 are working but are being overwritten, in case doc() about writes proto() and nome() about writes doc(),

  • Exactly what happens in the table, but, pq one function overrides the other, if that is the correct way to invoke functions in the same event?

  • Well if I’m right what happens is that when you call the first event he arrow display: none in a certain line because of that filter and when you call the second he blank arrow the display along the same lines, I believe that this is what is happening

  • Do you need to use more than one filter? Example Gui name and proto 123 only a single filter at a time is enough?

  • @Guilhermecostalmim Not just a filter. I edited the question and introduced an image to be clearer.

  • Well I have no way to work out an agr code I have to get out, but I have an idea: makes a single function with 3 ifs that checks if the input is not empty if not eativer executes the filter reappointsSenai goes next in last Lse Voce can put an alert that all fields are empty, so just call this only function in the button

Show 2 more comments

Browser other questions tagged javascript

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