0

quería preguntar si sabía la manera de hacer que unos botones cambien de posición aleatoria-mente cada vez que se refresque el navegador o usando el botón "Aleatorio"

Gracias

Adjunto código HTML y CSS

.style {
  background: orange;
  color: black;
  margin: 4px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  font-weight: bold;
  font-size:15pt;
  cursor: pointer;
  border: none;
  outline: none;
}

.random{
  background: green;
  color:white;
  font-family: 'Tahoma';
  border-radius: 4px;
  margin: 4px;
  padding: 5px;
  font-size: 14pt;
  cursor: pointer;
  border: none;
}
<input value ="Aleatorio" type="button" id="random" class="random"></td>
<table>
<td>  <input value=" 1 " data-number="1" onclick="number(1)" type="button" id="1" class="style"></td>    
<td>  <input value=" 2 " data-number="2" onclick="number(2)" type="button" id="2" class="style"</td>
<td>  <input value=" 3 " data-number="3" onclick="number(3)" type="button" id="3" class="style"></td>
</tr>


<td>  <input value=" 4 " data-number="4" onclick="number(4)" type="button" id="cuatro" class="style"></td>
<td>  <input value=" 5 " data-number="5" onclick="number(5)" type="button" id="cinco" class="style"></td>
<td>  <input value=" 6 " data-number="6" onclick="number(6)" type="button" id="seis" class="style"></td>

2
  • Que es lo que has intentado hasta ahora?
    – alanfcm
    Commented el 4 jun. 2018 a las 15:59
  • Con Javascript es bien sencillo, sólo tienes que "barajar" los número del 1 al 6 y luego insertarlos en los 6 botones Commented el 4 jun. 2018 a las 16:02

3 respuestas 3

1

En el ejemplo te faltaban cerrar ciertas etiquetas y agregar otras tantas, también se reemplazo el nombre de los ID.

Este código que te comparto hace lo que necesitas:

//Aqui asignas la funcionalidad Click al botón, una vez se ha cargado el documento

$(document).ready(function(){

  $("#random").click(function () {
        var numeros =  [1,2,3,4,5,6];
        numeros.sort(function() { return 0.5 - Math.random() });
        $.each(numeros, function(index, value) {
          $('#n' + index).val(value);
        });
  });

});
.style {
  background: orange;
  color: black;
  margin: 4px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  font-weight: bold;
  font-size:15pt;
  cursor: pointer;
  border: none;
  outline: none;
}

.random{
  background: green;
  color:white;
  font-family: 'Tahoma';
  border-radius: 4px;
  margin: 4px;
  padding: 5px;
  font-size: 14pt;
  cursor: pointer;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  value ="Aleatorio" type="button" id="random" class="random"></td> 
<table>
    	<tr>
    		<td><input value="1" data-number="1" onclick="number(1)" type="button" id="n0" class="style"></td>
    		<td><input value="2" data-number="2" onclick="number(2)" type="button" id="n1" class="style"></td>
    		<td><input value="3" data-number="3" onclick="number(3)" type="button" id="n2" class="style"></td>
    	</tr>
    	<tr>
    		<td>  <input value="4" data-number="4" onclick="number(4)" type="button" id="n3" class="style"></td>
    		<td>  <input value="5" data-number="5" onclick="number(5)" type="button" id="n4" class="style"></td>
    		<td>  <input value="6" data-number="6" onclick="number(6)" type="button" id="n5" class="style"></td>
    	</tr>
    </table>

0

Mira, te muestro en este ejemplo lo que pasa.

$('.estilo').hover(function(){
    $('.estilo').each(function(){
      $(this).val(" * ");
    });
});

$('.estilo').mouseout(function(){
  $('.estilo').each(function(){
     let val = $(this).data('number');
      $(this).val( val );
  });
});

    document.title = "ejemplo teclado";

    <!----- variable para imprimir numeros
    var answer_mode = 0;    

    <!----- función para limpiar la pantalla
    function clear1() {
        document.forms["teclado"].display.value = "";
    }
    
    function clear() {
        clear1();
    }

    function number(ch) {
        if (answer_mode) {
        clear1();
        answer_mode = 0;
        }    
        document.forms["teclado"].display.value += ch;
        var hoja=ch
    }

  function randomNumbers(){

     var values = [1,2,3,4,5,6,7,8,9,0];
     var random = Math.floor(Math.random() * 10);
     
     //Barajea los valores
     for(var i=-1; i<random; i++){
       var item = values.shift();
       values.push(item);
     } 
     
     for(var i=1; i<=values.length; i++){
     
       var currentNumber =  values[i-1];
       var inputObject = document.getElementById('input_'+i);
       inputObject.value = currentNumber;
       inputObject.setAttribute("data-number",currentNumber);
     } 
  }
  //random numbers in each refresh
  randomNumbers();
.estilo {
  width:50px;
  height:50px;
  font-size:30px;
  color:blue
}

.c {
  width:50px;
  height:50px;
  font-size:30px;
  color:blue
}

button {
  background: black;
  color: white;
  margin: 3px;
  padding: 6px;
  border-radius: 2px;
  cursor: pointer;
  border: none;
  outline: none;
}
<form name="teclado">

<input readonly="readonly" type="text" name="display" value="" size="8" style="text: Arial; font-size: 20pt; background-color:#58D3F7" >
<table>

<tbody>

<tr></tr><tr></tr><tr></tr>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  
<td>  <input value=" 7 " data-number="7" onclick="number(7)" type="button" id="input_7" class="estilo"></td>    
<td>  <input value=" 8 " data-number="8" onclick="number(8)" type="button" id="input_8" class="estilo"</td>
<td>  <input value=" 9 " data-number="9" onclick="number(9)" type="button" id="input_9" class="estilo"></td>
</tr>

<tr>
<td>  <input value=" 4 " data-number="4" onclick="number(4)" type="button" id="input_4" class="estilo"></td>
<td>  <input value=" 5 " data-number="5" onclick="number(5)" type="button" id="input_5" class="estilo"></td>
<td>  <input value=" 6 " data-number="6" onclick="number(6)" type="button" id="input_6" class="estilo"></td>
</tr>


<tr>
<td>  <input value=" 1 " data-number="1" onclick="number(1)" type="button" id="input_1" class="estilo"></td>
<td>  <input value=" 2 " data-number="2" onclick="number(2)" type="button" id="input_2" class="estilo"></td>
<td>  <input value=" 3 " data-number="3" onclick="number(3)" type="button" id="input_3" class="estilo"></td>
</tr>



<td><input value=" 0 " data-number="0" onclick="number(0)" type="button" id="input_10" class="estilo"></td>

<td></td>

<td>  <input value="C" onclick="clear1()" type="button" class="c"></td>

<td></td>
<button class="btn" type="ver">Mostrar URL</button>

Al enviarlo solo visualmente me cambia los textos, pero permanecen igual. Quisiera hacerlo tanto con este tipo de ejemplo porque son varias temáticas y una de ellas es con imágenes también.

Disculpa tanta pregunta.

-1

Hola te dejo un ejemplo de como barajear los valores utilizando la función shift.

  function randomNumbers(){

     var values = [1,2,3,4,5,6];
     var random = Math.floor(Math.random() * 6);
     
     //Barajea los valores
     for(var i=0; i<random; i++){
       var item = values.shift();
       values.push(item);
     } 
     
     for(var i=1; i<=values.length; i++){
     
       var currentNumber =  values[i-1];
       var inputObject = document.getElementById('input_'+i);
       inputObject.value = currentNumber;
       inputObject.setAttribute("data-number",currentNumber);
     } 
  }
  //random numbers in each refresh
  randomNumbers();
.style {
  background: orange;
  color: black;
  margin: 4px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  font-weight: bold;
  font-size: 15pt;
  cursor: pointer;
  border: none;
  outline: none;
}

.random {
  background: green;
  color: white;
  font-family: 'Tahoma';
  border-radius: 4px;
  margin: 4px;
  padding: 5px;
  font-size: 14pt;
  cursor: pointer;
  border: none;
}
<html>

<head>

</head>

<body>
  <input onclick="randomNumbers()" value="Aleatorio" type="button" id="random" class="random"></td>
  <table>
    <td> <input value=" 1 " data-number="1" onclick="number(1)" type="button" id="input_1" class="style"></td>
    <td> <input value=" 2 " data-number="2" onclick="number(2)" type="button" id="input_2" class="style" </td>
      <td> <input value=" 3 " data-number="3" onclick="number(3)" type="button" id="input_3" class="style"></td>
      </tr>
      <td> <input value=" 4 " data-number="4" onclick="number(4)" type="button" id="input_4" class="style"></td>
      <td> <input value=" 5 " data-number="5" onclick="number(5)" type="button" id="input_5" class="style"></td>
      <td> <input value=" 6 " data-number="6" onclick="number(6)" type="button" id="input_6" class="style"></td>

</body>

</html>

3
  • Ambas respuesta tienen de a 1 parte de lo que necesito, uno aporta la solución con botón y otro con refresh... ¿Qué procede?
    – Eriold
    Commented el 4 jun. 2018 a las 18:04
  • Bueno si me acabo de encontrar con algo, a la hora de verlo, sí cambian visualmente, pero el valor "data-number" no se cambia, permanecen en la misma posición. ¿Qué podría hacer para que igual esta propiedad se mueva con todo?
    – Eriold
    Commented el 4 jun. 2018 a las 18:26
  • @Eriold El codigo si cambia el valor del atributo data-number, si miras el codigo solo fue necesario meter el codigo js dentro de una funcion y asociarlo con el boton de aleatorio.
    – JGarnica
    Commented el 4 jun. 2018 a las 18:47

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.