Can you make method calls by clicking on a button in HTML5?

Navigation
0

The question is that if I can make calls to methods to not do so much code, I must show a table by pressing different buttons. 

 <button>Más Opciones</button>

 <button>Más Opciones</button>


<TABLE align="center">
                                    <TR>
                                        <TD>
                                            <label class="radio-inline">
                                                <input type="radio" name="TipoActivo" value=1>1
                                            </label>
                                        </TD>
                                        <TD>
                                            <label class="radio-inline">
                                                <input type="radio" name="TipoSaldo" value=1>2
                                            </label>
                                        </TD>
                                    </TR>
                                    <TR>
                                        <TD>
                                            <label class="radio-inline">
                                                <input type="radio" name="TipoActivo" value=2>P3
                                            </label>
                                        </TD>
                                        <TD>
                                            <label class="radio-inline">
                                                <input type="radio" name="TipoSaldo" value=2>7
                                            </label>
                                        </TD>
                                    </TR>
                                    <TR>
                                        <TD>
                                            <label class="radio-inline">
                                                <input type="radio" name="TipoActivo" value=3>8
                                            </label>
                                        </TD>
                                        <TD>
                                            <label class="radio-inline">
                                                <input type="radio" name="TipoSaldo" value=3>9
                                            </label>
                                        </TD>
                                    </TR>
                                </TABLE>

Pressing any of the two buttons will show me the same table

    
asked by 09.11.2017 в 14:54
source

3 answers

7

You can call any function of JavaScript by placing the attribute onclick in your element and assigning it as a value the name of the function you want to call, ejm: 

<button onclick="myFunction()">Más Opciones</button>

<button onclick="myFunction()">Más Opciones</button>

And in javascript you should have something like: 

function myFunction(){
    // Código de la función
}

FUNCTIONAL EXAMPLE WITH NATIVE JAVASCRIPT 

function mostrarTabla(){
    var tabla = document.querySelector("table");
    tabla.style.display = 'block';
}
table{
    display: none;
}
<button onclick="mostrarTabla()">Más Opciones</button>

<button onclick="mostrarTabla()">Más Opciones</button>


<table align="center">
<tr>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoActivo" value=1>1
        </label>
    </td>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoSaldo" value=1>2
        </label>
    </td>
</tr>
<tr>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoActivo" value=2>P3
        </label>
    </td>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoSaldo" value=2>7
        </label>
    </td>
</tr>
<tr>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoActivo" value=3>8
        </label>
    </td>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoSaldo" value=3>9
        </label>
    </td>
</tr>
</table>

FUNCTIONAL EXAMPLE WITH JQUERY 

function mostrarTabla(){
    $("table").fadeIn();
}
table{
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<button onclick="mostrarTabla()">Más Opciones</button>

<button onclick="mostrarTabla()">Más Opciones</button>


<table align="center">
<tr>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoActivo" value=1>1
        </label>
    </td>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoSaldo" value=1>2
        </label>
    </td>
</tr>
<tr>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoActivo" value=2>P3
        </label>
    </td>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoSaldo" value=2>7
        </label>
    </td>
</tr>
<tr>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoActivo" value=3>8
        </label>
    </td>
    <td>
        <label class="radio-inline">
            <input type="radio" name="TipoSaldo" value=3>9
        </label>
    </td>
</tr>
</table>
    
answered by 09.11.2017 / 14:57
source
1

In the following example we will learn to call a function when pressing a button in JS. 

<html> <head>

<script type="text/javascript"> function miFuncion() { alert("Activaste la funcion miFuncion()"); } </script>

</head> <body>

<form> <input type="button"  onclick="miFuncion()"  value="Activar Función"> </form>

<p>Presiona el botón y saldra una alerta contenida dentro de una función.</p>

</body> </html>
    
answered by 09.11.2017 в 15:02
1

Try placing 

<button onclick="myFunction()">Mas opciones</button>

for each button you can place a specific function.

or else 

<button id="one">Mas opciones</button>

JQuery 

$("#one").click(function(){
$("table").hide();

});

to show a specific table you can assign it a class and use the .hide () or .show () JQuery functions

    
answered by 09.11.2017 в 15:04
CSS event when clicking on container The PreparedStatement gets stuck when I ask a lot of questions