How can I generate a dynamic id from 1 to 10 with js

Question

How can I generate a dynamic id from 1 to 10 with js

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a problem wanting to generate a dynamic id for my input of a form ...

    $(function() {
  $('#imagen1').change(function(x) {
      addImage(x); 
     });
     function addImage(x){
      var file = x.target.files[0],
      imageType = /image.*/;

      if (!file.type.match(imageType))
       return;

      var reader = new FileReader();
      reader.onload = fileOnload;
      reader.readAsDataURL(file);
     }
     function fileOnload(x) {
      var result=x.target.result;
      $('#imagen1salida').attr("src",result);
     }
  });

What I want to do is that this image preview function runs 10 times but with different ids, for example $ ('# image2'), $ ('# image3'), $ ('# image4') . Basically what I want is to make a for that generates me those numbers that go after the image, that would be something like that $ ('# image' + variable + ''); so I do not have to copy that function 10 times.

Try this way but it does not work for me:

 var numero = "";
var i;
for (i = 1; i < 11; i++) {
  numero += i;
  prueba = numero;
 $(function() {
  $('#imagen'+prueba+'').change(function(x) {
      addImage(x); 
     });
     function addImage(x){
      var file = x.target.files[0],
      imageType = /image.*/;

      if (!file.type.match(imageType))
       return;

      var reader = new FileReader();
      reader.onload = fileOnload;
      reader.readAsDataURL(file);
     }
     function fileOnload(x) {
      var result=x.target.result;
      $('#imagen'+prueba+'salida').attr("src",result);
     }
  });
}

This is the form, I'm working with Laravel by the way.

<div class="form-group">
                <label for="imagen1">Pregunta 1</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion1}}">
                <input id="imagen1" type="file" name="imagen1" value="{{asset('imagenes/encuestas/'.$encuesta->imagen1)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen1">
                    <img id="imagen1salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen1)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen2">Pregunta 2</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion2}}">
                <input id="imagen2" type="file" name="imagen2" value="{{asset('imagenes/encuestas/'.$encuesta->imagen2)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen2">
                    <img id="imagen2salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen2)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen3">Pregunta 3</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion3}}">
                <input id="imagen3" type="file" name="imagen3" value="{{asset('imagenes/encuestas/'.$encuesta->imagen3)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen3">
                    <img id="imagen3salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen3)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen4">Pregunta 4</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion4}}">
                <input id="imagen4" type="file" name="imagen4" value="{{asset('imagenes/encuestas/'.$encuesta->imagen4)}}" class="form-control" accept="image/jpeg, image/png, Image/bmp" style="display: none;">
                <br>
                <label for="imagen4">
                    <img id="imagen4salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen4)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen5">Pregunta 5</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion5}}">
                <input id="imagen5" type="file" name="imagen5" value="{{asset('imagenes/encuestas/'.$encuesta->imagen5)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen5">
                    <img id="imagen5salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen5)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="imagen6">Pregunta 6</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion6}}">
                <input id="imagen6" type="file" name="imagen6" value="{{asset('imagenes/encuestas/'.$encuesta->imagen6)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen6">
                    <img id="imagen6salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen6)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen7">Pregunta 7</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion7}}">
                <input id="imagen7" type="file" name="imagen7" value="{{asset('imagenes/encuestas/'.$encuesta->imagen7)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen7">
                    <img id="imagen7salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen7)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen8">Pregunta 8</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion8}}">
                <input id="imagen8" type="file" name="imagen8" value="{{asset('imagenes/encuestas/'.$encuesta->imagen8)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen8">
                    <img id="imagen8salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen8)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen9">Pregunta 9</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion9}}">
                <input id="imagen9" type="file" name="imagen9" value="{{asset('imagenes/encuestas/'.$encuesta->imagen9)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen9">
                    <img id="imagen9salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen9)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>
            <div class="form-group">
                <label for="imagen10">Pregunta 10</label>
                <input type="text" class="form-control" value="{{$encuesta->opcion10}}">
                <input id="imagen10" type="file" name="imagen10" value="{{asset('imagenes/encuestas/'.$encuesta->imagen10)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
                <br>
                <label for="imagen10">
                    <img id="imagen10salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen10)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
            </div>

I hope and my question is understood ... thank you very much.

javascript jquery

asked by Hernan Chaparro 29.08.2018 в 19:56

source

2 answers

Error in delaying hide message using delay & fadeOut - jQuery how to do a search engine in laravel with related tables

score 1 · Answer 1

There are several issues here, check the javascript you are generating:

var numero = "";
var i;
for (i = 1; i < 11; i++) {
  numero += i;
  prueba = numero;
 $(function() {
  console.log("prueba:",prueba);
  $('#imagen'+prueba+'').change(function(x) {
      addImage(x); 
     });
     function addImage(x){
      var file = x.target.files[0],
      imageType = /image.*/;

      if (!file.type.match(imageType))
       return;

      var reader = new FileReader();
      reader.onload = fileOnload;
      reader.readAsDataURL(file);
     }
     function fileOnload(x) {
      var result=x.target.result;
      $('#imagen'+prueba+'salida').attr("src",result);
     }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1) numero is a string, so adding i is converted to 1 , 12 ... 123456789 , 12345678910 .

2) By putting $(function() { within a for you are adding events to documentready that are going to run all together when you load the page.

3) Variables in javascript are references to an object in memory, so changing numero and assigning it to prueba when actually executing the $('#imagen'+prueba+'').change(function(x) { will all have the same id: #imagen12345678910 .

4) Something similar happens when you want to use prueba to find the image corresponding to each input file, you have to capture the id of each input file and pass it to each of the readers that are created (so each reader knows which image to change the src )

A code adapted to avoid these things would be something like this:

var i;
// sacamos las funciones hacia afuera del docready
function addImage(x) {
  var file = x.target.files[0],
    imageType = /image.*/;

  if (!file.type.match(imageType))
    return;

  var reader = new FileReader();
  // guardamos el ID del input[file] dentro de cada reader
  reader.elId = x.target.id;
  reader.onload = function(x) {
    var result = x.target.result;
    // recuperamos el ID y apuntamos a la img
    $('#' + x.target.elId + 'salida').attr("src", result);
  };
  reader.readAsDataURL(file);
}

// una sola funcion docready
$(function() {
  for (i = 1; i < 11; i++) {
    var selector = '#imagen' + i;
    console.log("selector:", selector);
    $(selector).change(function(x) {
      addImage(x);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

On the other hand, and because the IDs in your code are always input of type file , you can summarize a bit without having to generate the ID , something like this:

var i;
// sacamos las funciones hacia afuera del docready
function addImage(x) {
  var file = x.target.files[0],
    imageType = /image.*/;

  if (!file.type.match(imageType))
    return;

  var reader = new FileReader();
  // guardamos el ID del input[file] dentro de cada reader
  reader.elId = x.target.id;
  reader.onload = function(x) {
    var result = x.target.result;
    // recuperamos el ID y apuntamos a la img
    $('#' + x.target.elId + 'salida').attr("src", result);
  };
  reader.readAsDataURL(file);
}


// una sola funcion docready
$(function() {
  // un solo selector para todos
  $('input[type="file"]').change(function(x) {
    addImage(x);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="imagen7">Pregunta 7</label>
  <input type="text" class="form-control" value="{{$encuesta->opcion7}}">
  <input id="imagen7" type="file" name="imagen7" value="{{asset('imagenes/encuestas/'.$encuesta->imagen7)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: block;">
  <br>
  <label for="imagen7">
                    <img id="imagen7salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen7)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
</div>
<div class="form-group">
  <label for="imagen8">Pregunta 8</label>
  <input type="text" class="form-control" value="{{$encuesta->opcion8}}">
  <input id="imagen8" type="file" name="imagen8" value="{{asset('imagenes/encuestas/'.$encuesta->imagen8)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: block;">
  <br>
  <label for="imagen8">
                    <img id="imagen8salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen8)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
</div>
<div class="form-group">
  <label for="imagen9">Pregunta 9</label>
  <input type="text" class="form-control" value="{{$encuesta->opcion9}}">
  <input id="imagen9" type="file" name="imagen9" value="{{asset('imagenes/encuestas/'.$encuesta->imagen9)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: block;">
  <br>
  <label for="imagen9">
                    <img id="imagen9salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen9)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
</div>
<div class="form-group">
  <label for="imagen10">Pregunta 10</label>
  <input type="text" class="form-control" value="{{$encuesta->opcion10}}">
  <input id="imagen10" type="file" name="imagen10" value="{{asset('imagenes/encuestas/'.$encuesta->imagen10)}}" class="form-control" accept="image/jpeg, image/png, image/bmp" style="display: none;">
  <br>
  <label for="imagen10">
                    <img id="imagen10salida" src="{{asset('imagenes/encuestas/'.$encuesta->imagen10)}}" class="img-responsive" alt="" style="width: 100px;"/>
                </label>
</div>

score 0 · Answer 2

You are having a couple of problems, the $(function() { }) has to wrap the whole script, you are creating it in each cycle for . And when you use the variable prueba in $('#imagen'+prueba+'') you're having an error since that returns a string empty, then you do not add the change() method.

You should change that and you would already be using $('#imagen'+ i) .

$(function() {
  function addImage(ev, i) {
    var file = ev.target.files[0],
    imageType = /image.*/;

    if (!file.type.match(imageType))
    return;

    var reader = new FileReader();
    reader.onload = function(e) {
      var result = e.target.result;
      $('#imagen'+i+'salida').attr("src",result);
    };
    reader.readAsDataURL(file);
  }
  for (var i = 1; i < 11; i++) {
    $('#imagen'+ i).change(function(event) {
      addImage(event, i);
    });
  }
});