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>
3 respuestas
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()">
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>
- 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">
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.