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>