0

El objetivo de este pequeño script es cambiar el contenido de uno de los spans en base a un numero ingresado por el usuario cuyo valor representa una posicion en el indice de la variable x

<html>
<head>
    <script>
        var x = document.getElementsByClassName("opciones");
        var i = document.getElementById("numeroDePagina").value;

        function mostrarPagina(){
            x[i].innerHTML = ":O";
        }
    </script>
</head>
<body>
    <span class="opciones" style="background-color: red; padding: 10px; color: white;">:)</span><br><br><br>
    <span class="opciones" style="background-color: orange; padding: 10px;">:)</span><br><br><br>
    <span class="opciones" style="background-color: yellow; padding: 10px;">:)</span><br><br><br>
    <span class="opciones" style="background-color: green; padding: 10px; color: white;">:)</span><br><br><br>
    <span class="opciones" style="background-color: blue; padding: 10px; color: white;">:)</span><br><br><br>
    <span class="opciones" style="background-color: purple; padding: 10px; color: white;">:)</span><br><br><br>
    <span class="opciones" style="background-color: fuchsia; padding: 10px;">:)</span><br><br><br>
    <br>
    Ingresa un numero del 0 al 6 para ver el resultado: 
    <input type="text" class="numeroDePagina"></input>
    <button onclick="mostrarPagina()">Haz clic</button>
</body>
</html>

2 respuestas 2

0

Hay varias cosas mal en el código.

1 - Debes de incluir en el código html de la página la etiqueta<meta charset="UTF-8">

2 - Las variables declaradas x e y debes declararlas dentro de la función mostrarPagina() ya que solo las usarás en esa función, no es necesario que sean variables globales.

3 - En la etiqueta del input <input type="text" class="numeroDePagina"></input> pusiste "class" en vez de "id"

Una vez dicho lo anterior, y con el código corregido de la siguiente manera:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  

    <script type="text/javascript">

        function mostrarPagina(){

            var x = document.getElementsByClassName("opciones");
            var i = document.getElementById("numeroDePagina").value;

            x[i].innerHTML = ":O";
        }

    </script>
</head>
<body>
    <span class="opciones" style="background-color: red; padding: 10px; color: white;">:)</span><br><br><br>
    <span class="opciones" style="background-color: orange; padding: 10px;">:)</span><br><br><br>
    <span class="opciones" style="background-color: yellow; padding: 10px;">:)</span><br><br><br>
    <span class="opciones" style="background-color: green; padding: 10px; color: white;">:)</span><br><br><br>
    <span class="opciones" style="background-color: blue; padding: 10px; color: white;">:)</span><br><br><br>
    <span class="opciones" style="background-color: purple; padding: 10px; color: white;">:)</span><br><br><br>
    <span class="opciones" style="background-color: fuchsia; padding: 10px;">:)</span><br><br><br>
    <br>
    Ingresa un numero del 0 al 6 para ver el resultado: 
    <input type="text" id="numeroDePagina"></input>
    <button onclick="mostrarPagina()">Haz clic</button>
</body>
</html>

El programa funcionará correctamente.

2
  • Ademas de que habia puesto class en lugar de id, por que las variables si son declaradas fuera de la funcion la funcion no funciona? Commented el 1 nov. 2019 a las 21:33
  • Puedes declarar la variable x fuera, porque cuando cargas la pagina, no estas obteniendo ningun valor de ella. Pero la variable "i" necesita tener un valor, es decir, lo que obtienes de la variable i es el .value y por lo tanto, cuando se carga la pagina por primera vez, el input con id "numeroDePagina" no tiene ningun valor, solo tendrá valor cuando lo introduzcas manualmente y le des al boton. El error que sale cuando declaras fuera ambas es un error de que no obtiene valor para la variable i.
    – Deivid_41
    Commented el 1 nov. 2019 a las 21:55
0

Tu variable i guarda el valor "" ya que esta linea solo se ejecuta una vez al principio del programa y no es actualizada nuevamente, mira este ejemplo:

var elementos = document.getElementsByClassName("opciones");

function mostrarPagina(){
  var i = document.getElementById("numeroDePagina").value;
  elementos[i].innerHTML = ":O";
}
<span class="opciones" style="background-color: red; padding: 10px; color: white;">:)</span><br><br><br>
<span class="opciones" style="background-color: orange; padding: 10px;">:)</span><br><br><br>
<span class="opciones" style="background-color: yellow; padding: 10px;">:)</span><br><br><br>
<span class="opciones" style="background-color: green; padding: 10px; color: white;">:)</span><br><br><br>
<span class="opciones" style="background-color: blue; padding: 10px; color: white;">:)</span><br><br><br>
<span class="opciones" style="background-color: purple; padding: 10px; color: white;">:)</span><br><br><br>
<span class="opciones" style="background-color: fuchsia; padding: 10px;">:)</span><br><br><br>
<br>
Ingresa un numero del 0 al 6 para ver el resultado: 
<input type="text" id="numeroDePagina"></input>
<button onclick="mostrarPagina()">Haz clic</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.