javascript two functions does not let them run at the same time

Question

javascript two functions does not let them run at the same time

Navigation

#1 by (0 votes)

1

img{

  
  max-width:451px;
  width: 451px;
  height:254px;
  margin-top:20px;
  width: 100%;
  
   border-top-right-radius: 15px;
   border-top-left-radius: 15px;
   

}
#divimage div{
	width: 451px;
}
#wallet div{
	 border-bottom-right-radius: 15px;
   border-bottom-left-radius: 15px;
}

input{
    margin-top:20px;
}

<!DOCTYPE html>
<html>
<head>
  <title>previe</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">


<link rel="stylesheet" type="text/css" href="style.css">
<!------ Include the above in your HEAD tag ---------->
<body>
 
    
    <div class="custom-file">
    <input type="file" class="custom-file-input" onchange="readURL(this);" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label"  for="inputGroupFile01">Choose file</label>
  </div>
  <div id="divimage">
 <div class="container-fluid">
  
   <div class="row">

   <img id="blah"  src="http://placehold.it/180" alt="your image" />

    <div id="quest" class="alert alert-warning col-12" role="alert"><p style="text-align: center;">
    ¿Con que frecuencia consume cafe?</p></div>
    
    <div class="alert alert-warning col-6">.col-md-1</div>
  <div class="alert alert-warning col-6">.col-md-1</div>
    </div>

   </div>

</div>
  

</body> 
</html>




<script type="text/javascript">
  
   function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

I have these functions as I do so they can work both at the same time

    
function inputTexet(){
$("#texto1").on('keyup', function(){
        var value = $(this).val();
        $("#prueba").html(value);
    }).keyup();

}

 function inputTexet2(){
$("#texto2").on('keyup', function(){
        var value = $(this).val();
        $("#prueba2").html(value);
    }).keyup();

}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<input type="text" name="texto1" id="texto1" onclick="inputTexet();" placeholder="escribe lo que quieras">
    <p id="prueba"></p>

    <input type="text" name="texto2" id="texto1"    onclick="inputTexet2();"  placeholder="escribe lo que quieras">
 <p id="prueba2"></p>

javascript jquery

asked by Ramon Albares 29.12.2018 в 00:36

source

1 answer

Problem with tickers in go Problem with the visual studio chart control in C #

score 0 · Accepted Answer

Solution:

The second input has the id equal to the first change it to be "text2".

It turns out that the failure is in that the second input has the same id as the first one, so when you selected the second input with the onclick you called the second function, but since it did not find the id did nothing.

You are calling the functions with onclick , when with jquery you are already indicating it

It is not necessary since keyup already indicates that if the input is pressed a key causes that in the label <p> is written.

    

$("#texto1").on('keyup', function(){
        var value = $(this).val();
        $("#prueba").html(value);
    }).keyup();

$("#texto2").on('keyup', function(){
        var value = $(this).val();
        $("#prueba2").html(value);
    }).keyup();

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<input type="text" name="texto1" id="texto1" placeholder="escribe lo que quieras">
    <p id="prueba"></p>

    <input type="text" name="texto2" id="texto2"  placeholder="escribe lo que quieras">
 <p id="prueba2"></p>