Cómo cambiar la posición de múltiples elementos en la entrada

Question

Estoy tratando de modificar el parámetro izquierdo de 5 elementos con la misma identificación en el valor negativo de un elemento de entrada como porcentaje. en la práctica, quiero que cuando cambie el valor de entrada, el parámetro izquierdo de los 5 elementos sea igual al valor de entrada pero negativo y en porcentaje.

var x = document.getElementById-("input");
   function myFunction() {
      document.getElementById('slide').style.left = x ;
     }

<div class="exemple">
      <img id="slide" src="example">
      <img id="slide" src="example">
      <img id="slide" src="example">
      <img id="slide" src="example">
      <img id="slide" src="example">
   </div>
   <input id="inupt" onchange = "myFunction()">
  

</div>

javascript html css positioning interactive

1

Marco Molinari 22 sep. 2019 a las 12:33

Answer 1

Wow, tu código fue realmente una molestia. ¡Mira tus errores tipográficos la próxima vez! Esto debería hacer el trabajo, no sé qué estás haciendo exactamente, pero te aconsejo que uses un marco para controles deslizantes.

function myFunction() {
  var slides = document.getElementsByClassName("slide");

  var x = document.getElementById("input").value;
  Array.prototype.forEach.call(slides, function(el) {

    el.style.left = "" + x + "px";
  });
}

.slide {
  position: relative;
}

<div class="exemple">
  <img class="slide" src="example">
  <img class="slide" src="example">
  <img class="slide" src="example">
  <img class="slide" src="example">
  <img class="slide" src="example">
</div>
<input id="input" onchange="myFunction()">

1

Niklas 22 sep. 2019 a las 09:51

Answer 2

Supongo que esto es lo que querías lograr:

<div class="example">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
      <img class="slide" src="https://404store.com/2018/09/01/random-small-images43.png">
   </div>
   <input id="input" onchange = "myFunction(this)">
</div>

<script>
var myFunction=function(inputElement) {
  let x=inputElement.value;
  let imgElements=document.getElementsByClassName('slide');
  Array.prototype.forEach.call(document.getElementsByClassName('slide'),(imgEle)=> {
    console.log(imgEle);
    imgEle.style.left=x+'px';
  })

}
</script>

0

Nithin Kumar Biliya 22 sep. 2019 a las 10:02

Answer 3

No puede tener más de un elemento con el mismo IF: tiene sentido porque los identificadores son únicos.
Si desea manipular más de un elemento, puede usar el atributo de clase.

Supongo que quieres lograr algo como esto (se agregaron comentarios al js para explicar):

function myFunction() { // when the input value changes
var x = document.getElementsByClassName('slide'); // this is the images with the class instead of id
var y = document.getElementById('demo').value; // this will take the current value of the input
  for (var i=0; i < x.length; i++) { // this will illitrate all images with the class slide
    x[i].style.left = y+'px'; // this will move all of them left
  }
}

img {width: 100px; height: 100px; border: 1px solid black; position: relative;}

<div>
  <img class="slide" />
  <img class="slide" />
  <img class="slide" />
  <img class="slide" />
  <img class="slide" />
</div>
<input type="number" id="demo" onchange="myFunction()" value="0">

0

A. Meshu 22 sep. 2019 a las 09:56

Cómo cambiar la posición de múltiples elementos en la entrada

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript