add and remove the input number

2

I'm creating an image selection page and wanted to click on choose the number for the input and if it clicks again it leaves the input because there will be several fts chosen body

    <?php
session_start();
if(!isset($_SESSION['tkm'])){
    $redirect = "index.php";
   header("location:$redirect");
}else{
    include 'conn.php';
    $tkm=$_SESSION['tkm'];
    $sql="SELECT id FROM 'usuario' WHERE tkm='$tkm'";
    $executar= mysqli_query($link,$sql);
    $num= mysqli_num_rows($executar);
    if($num == 1){
        while($show=mysqli_fetch_array($executar)){
            $id=$show['id'];
        }
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Selecionar Fotos</title>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse collapse" id="navbarColor01" style="">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link" href="sair.php">sair</a>
        </li>
      </ul>
    </div>
  </nav>
    <div class="container">

        <div class="row">

        <?php
                    $sql="SELECT foto FROM 'foto' WHERE usuario=$id";
                    $executar= mysqli_query($link,$sql);
                    //$num= mysqli_num_rows($executar);
                    $i=0;
                    while($show=mysqli_fetch_array($executar)){
                        $foto=$show['foto'];
                        $i++;
                ?>
                    <div class="col-xs-12 col-md-3 col-lg-3 col-xs-3 col-sm-3">


                        <div class="select zoom">
                            <img  src="<?php echo $foto; ?>" onclick="imgZ('mostrar');AplI('<?php echo $foto; ?>');" >
                            <img class="veisto" src="visto.png" id="<?php echo $i; ?>" >
                        </div>

                        <button onclick="escolha('<?php echo $i; ?>');marcar('<?php echo $i; ?>')">escolher</button>

                    </div>
                <?php
                }
                ?>  
                 <form action="" method="post">
                 <input type="text" name="escolidos" id="escolidos">
                    <input type="submit" value="enviar">
                </form>


        </div>

   </div>
   <div id="mostrar" class="mostrar">
       <img src="x.png" class="img-fechar" onclick="imgF('mostrar')" title="fechar">
       <center>
            <div id="zoomimg" class="img"></div>
        </center>
    </div>
<script src="div.js"></script>

</body>

</html>
<?php
    }else{
        $redirect = "sair.php";
        header("location:$redirect");
    }
?>

<?php
}

?>

javascript

function imgZ(el){   
   document.getElementById(el).style.display="block";
}
function AplI(el){
    document.getElementById('zoomimg').innerHTML=" <img src=\""+ el +"\" class=\" AplI \">";   
}
function imgF(el){
    document.getElementById(el).style.display="none";
}
function escolha(el){
    var visto = document.getElementById(el).style.display;
    if(visto == "none")
        document.getElementById(el).style.display="block";
    else
        document.getElementById(el).style.display="none";
}
function marcar(el){
    var visto = document.getElementById(el).style.display;
    if(visto == "none")
        document.getElementById('escolidos').value += el+"%";
    else
    document.getElementById('escolidos').value -= el;

}
    
asked by anonymous 27.06.2018 / 21:09

1 answer

2

The problem lies in this line:

document.getElementById('escolidos').value -= el;

Then you are doing a subtraction math operation.

The correct one would be to replace :

document.getElementById('escolidos').value = document.getElementById('escolidos').value.replace(el+"%", '');

Example:

function escolha(el){
    var visto = document.getElementById(el).style.display;
    if(visto == "none")
        document.getElementById(el).style.display="block";
    else
        document.getElementById(el).style.display="none";
}
function marcar(el){
    var visto = document.getElementById(el).style.display;
    if(visto == "none")
        document.getElementById('escolidos').value += el+"%";
    else
    document.getElementById('escolidos').value = document.getElementById('escolidos').value.replace(el+"%", '');

}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="navbar-collapse collapse" id="navbarColor01" style="">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link" href="sair.php">sair</a>
        </li>
      </ul>
    </div>
  </nav>
    <div class="container">

        <div class="row">

                    <div class="col-xs-12 col-md-3 col-lg-3 col-xs-3 col-sm-3">
                        <div class="select zoom">
                            <img  src="<?php echo $foto; ?>" onclick="imgZ('mostrar');AplI('<?php echo $foto; ?>');" >
                            <img class="veisto" src="visto.png" id="1" >
                        </div>

                        <button onclick="escolha('1');marcar('1')">escolher</button>

                    </div>

                    <div class="col-xs-12 col-md-3 col-lg-3 col-xs-3 col-sm-3">
                        <div class="select zoom">
                            <img  src="<?php echo $foto; ?>" onclick="imgZ('mostrar');AplI('<?php echo $foto; ?>');" >
                            <img class="veisto" src="visto.png" id="2" >
                        </div>

                        <button onclick="escolha('2');marcar('2')">escolher</button>

                    </div>
                 <form action="" method="post">
                 <input type="text" name="escolidos" id="escolidos">
                    <input type="submit" value="enviar">
                </form>


        </div>

   </div>
   <div id="mostrar" class="mostrar">
       <img src="x.png" class="img-fechar" onclick="imgF('mostrar')" title="fechar">
       <center>
            <div id="zoomimg" class="img"></div>
        </center>
    </div>
    
27.06.2018 / 21:20