1

Quiero que al hacer click en el botón me arroje una letra, por ejemplo: si pulsara 7 apareciera "S"

var cifra="";
function display_numeros(numero){
  document.getElementById("display").value=cifra+numero;
  cifra=document.getElementById("display").value;
}
.numero{
  width:60px;
  height:60px;
  
  
}

.igual{
  width:120px;
  height:60px;
  
}

table{
  margin:auto;
}

.color_display{
  height:30px;
  background-color:#000;
  border:medium #FFF;
  font: "Space Age";
  color:#0F0;
  font-size:18px;
  text-align:right;
  padding:5px;
}
 
<table width="15%" border="1">
  <tr>
    <td colspan="4" align="center">
    <input name="display" type="text" class="color_display" id="display" size="25"></td>
  </tr>
  <tr>
    <td><input name="num7" type="submit" class="numero" id="num7" value="7" ></td>
    <td><input name="num8" type="submit" class="numero" id="num8" value="8" ></td>
    <td><input name="num9" type="submit" class="numero" id="num9" value="9" ></td>
    <td>&nbsp;</td>
  </tr>
</table>

0

3 respuestas 3

3

Sí quiere que al dar click en el botón se genere una letra aleatoriamente, podría tener un array o String de las letras posibles, y luego aplicar un Random para obtener el indice de la letra elegida. Una vez obtenido el indice usar el método charAt() (si desea letras mayúsculas u otros caracteres , agregarlos al String)

//posibles letras a elegir
var letras = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// Seleccionamos el input de salida para mostrar la letra
var inputresult= document.getElementById("display");
//Obtenemos los botones con la clase numero
var botones = document.querySelectorAll('.numero');
// iteramos sobre los botones
botones.forEach(function(el){
  // agregamos el listener para el evento click
  el.addEventListener('click',function(){
    // si se da click, asignamos la letra random obtenida
    //´por medio de charAt
    inputresult.value = letras.charAt(Math.floor(Math.random() * letras.length));
  });
});
<table width="15%" border="1">
  <tr>
    <td colspan="4" align="center">
    <input name="display" type="text" class="color_display" id="display" size="25"></td>
  </tr>
  <tr>
    <td><input name="num7" type="submit" class="numero" id="num7" value="7" ></td>
    <td><input name="num8" type="submit" class="numero" id="num8" value="8" ></td>
    <td><input name="num9" type="submit" class="numero" id="num9" value="9" ></td>
    <td>&nbsp;</td>
  </tr>
</table>

1

El problema es que no pones en ninguna parte del código que al hacer click en el botón se ejecute la función display_numeros.

Los botones, si están en un formulario, ta y como los tienes enviarán el formulario, por lo que en type es mejor que pongas button.

Prueba con el código siguiente que es el tuyo con un par de modificaciones:

var cifra="";
function display_numeros(numero){
  document.getElementById("display").value=cifra+numero;
  cifra=document.getElementById("display").value;
}
.numero{
  width:60px;
  height:60px;
  
  
}

.igual{
  width:120px;
  height:60px;
  
}

table{
  margin:auto;
}

.color_display{
  height:30px;
  background-color:#000;
  border:medium #FFF;
  font: "Space Age";
  color:#0F0;
  font-size:18px;
  text-align:right;
  padding:5px;
}
 
<table width="15%" border="1">
  <tr>
    <td colspan="4" align="center">
    <input name="display" type="text" class="color_display" id="display" size="25"></td>
  </tr>
  <tr>
    <td><input name="num7" type="button" class="numero" id="num7" value="7" onClick="display_numeros(7)"></td>
    <td><input name="num8" type="button" class="numero" id="num8" value="8" onClick="display_numeros(8)"></td>
    <td><input name="num9" type="button" class="numero" id="num9" value="9" onClick="display_numeros(9)"></td>
    <td>&nbsp;</td>
  </tr>
</table>

1
  • Los <input> que envían un formulario son los que tienen submit como valor de type. Los de button por sí solos no hacen nada.
    – Rubén
    Commented el 29 ene. 2018 a las 16:50
1

Existen varias formas para que un botón realice una acción al hacer clic en él.

  • Incluir el atributo onClick teniendo como valor el código JavaScript a ejecutar. Este código puede ser una llamada a una función o puede ser directamente la instrucción.

    Ejemplo:

<table>
  <tr>
    <td>
      <input type="text" id="txt">
    </td>
    <tr>
      <td>
        <input type="button" value="7" onClick="getElementById('txt').value='S';">
      </td>
    </tr>
</table>

  • Usar un "listener". El segundo parámetro debe ser un objeto, el cual puede ser una llamada o una función.

    Ejemplo:

document
  .getElementById('btn')
  .addEventListener('click', function() {
    document.getElementById('txt').value = 'S';
  })
<table>
  <tr>
    <td>
      <input type="text" id="txt">
    </td>
    <tr>
      <td>
        <input type="button" id="btn" value="7">
      </td>
    </tr>
</table>

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.