Script does not obey the loop in button view

Asked

Viewed 49 times

-3

I am making a simple program, however I am with an error at the time of displaying the information, the following occurs, after generating the loop I click on one of the buttons, and regardless of the button I click, is always displayed the first result. If anyone knows a way to resolve this, and wishes to share, it would be of utmost importance.

<div id="busca">
    <h1>Olá, seja bem-vindo</h1>
    <p id="informativo">Digite um número abaixo</p>

    <form method="post" action="">
        <input id="cpf_processo" type="text" size="50" name="num_usuario" required="required"
               placeholder="Digite aqui">
        <input id="consultar" type="submit" name="vis_numero" value="CONSULTAR">
        <br>
    </form>
</div>

</body>
</html>


<script type="text/javascript">
    function visTabela(id) {
        var numero = document.getElementById("numero");
        var informativo = document.getElementById("informativo");
        if (numero.style.display === "none") {
            numero.style.display = "revert";
        } else {
            numero.style.display = "none";
            informativo.style.display = "revert";
        }
    }
</script>

<?php
$numUsuario = filter_input(INPUT_POST, 'num_usuario', FILTER_SANITIZE_STRING);
$visNumero = filter_input(INPUT_POST, 'vis_numero', FILTER_SANITIZE_STRING);

if ($visNumero == true) {

    for ($i = 0; $numUsuario > $i; $i++) {

        $infor = "<div id='informativo' style='display: block'> clique no botão acima</div> <br>";
        $mosNum = "<div id='numero' style='display: none'>O número do botão: $i </div>";
        $botao = "<button style='margin-top: 4%' onclick='visTabela()'>Mostrar número</button> ";

        echo "$botao";
        echo "$infor";
        echo "$mosNum";
    }
}
php javascript html css

  • What exactly do you want? explain in more detail, first of all suggest see how to create a [Mre] and How to make a good question?, edit your question, add details and clarifications, your attempts, the step-by-step of how it works and/or was meant to work, among others..

  • Usually in this kind of thing you need to send the ID and you open the right one, in case you’re not using the id for anything.

1 answer

0

In the function below, you’re supposed to get the id, but you’re not sending it first and tbm isn’t using it, so don’t bug, so if you do instead:

function visTabela(id) {
        var numero = document.getElementById("numero");
        var informativo = document.getElementById("informativo");
        if (numero.style.display === "none") {
            numero.style.display = "revert";
        } else {
            numero.style.display = "none";
            informativo.style.display = "revert";
        }
    }

do this:

function visTabela(id) {
        var numero = "numero-"+id;
        var numero = document.getElementById(numero);
        var informativo = document.getElementById("informativo");
        if (numero.style.display === "none") {
            numero.style.display = "revert";
        } else {
            numero.style.display = "none";
            informativo.style.display = "revert";
        }
    }

and change the php part to that:

$numUsuario = filter_input(INPUT_POST, 'num_usuario', FILTER_SANITIZE_STRING);
$visNumero = filter_input(INPUT_POST, 'vis_numero', FILTER_SANITIZE_STRING);

if ($visNumero == true) {

    for ($i = 0; $numUsuario > $i; $i++) {

        $infor = "<div id='informativo' style='display: block'> clique no botão acima</div> <br>";
        $mosNum = "<div id='numero-".$i."' style='display: none'>O número do botão: $i </div>";
        $botao = "<button style='margin-top: 4%' onclick='visTabela(".$i.")'>Mostrar número</button> ";

        echo $botao;
        echo $infor;
        echo $mosNum;
    }
}

You see that it worked the way you expect, the problem was that everyone was with the msm id, so he just took the first one, understood?

  • Excellent solution, thank you very much, worked perfectly

Browser other questions tagged php javascript html css

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