1

Intento hacer un teclado sencillo pero no ocurre nada al darle click a los numeros, los identifique con id, y les puse onclick pero la pantalla no cambia, aqui lo puse simplificado

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilo.css">
    <title>Document</title>
</head>
<body>
    <div class="numeros">

        <span class="pantalla" id="pantalla">Pantalla</span>
        <div>
            <div id="uno" class="numero">1</div>
            <div id="dos" class="numero">2</div>
            <div id="tres" class="numero">3</div>
        </div>

        <script type="text/javascript" src="ajustes.js"></script>
</body>
</html>

Este es mi archivo ajustes.js

function init(){
    
    var uno = document.getElementById('uno');
    var dos = document.getElementById('dos');
    var tres = document.getElementById('tres');
    
    uno.onclick = function(e){
        resultado.textContent = resultado.textContent + "1";
    }

    dos.onclick = function(e){
        resultado.textContent = resultado.textContent + "2";
    }
    tres.onclick = function(e){
        resultado.textContent = resultado.textContent + "3";

}   

Al darle click a los botones no pasa nada, tampoco aparece ningun error en consola, algo me tiene que faltar

introducir la descripción de la imagen aquí

2 respuestas 2

1

el problema es que estás intentando acceder al elemento "resultado" que no se encuentra en tu código, en vez de esto deberías referenciarlo a "pantalla" que es donde quieres mostrar el resultado del onclick, de esta forma:

pantalla.textContent = pantalla.textContent + "1";

Y al inicio del código definir la variable:

var pantalla = document.getElementById('pantalla');

var pantalla = document.getElementById('pantalla');
var uno = document.getElementById('uno');
var dos = document.getElementById('dos');
var tres = document.getElementById('tres');

uno.onclick = function(e) {
  pantalla.textContent = pantalla.textContent + "1";
}

dos.onclick = function(e) {
  pantalla.textContent = pantalla.textContent + "2";
}
tres.onclick = function(e) {
  pantalla.textContent = pantalla.textContent + "3";
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="estilo.css">
  <title>Document</title>
</head>

<body>
  <div class="numeros">

    <span class="pantalla" id="pantalla">Pantalla</span>
    <div>
      <div id="uno" class="numero">1</div>
      <div id="dos" class="numero">2</div>
      <div id="tres" class="numero">3</div>
    </div>

    <script type="text/javascript" src="ajustes.js"></script>
</body>

</html>

1

Observaciones:

  • Tendrías que ejecutar tu función init() para que ocurra las funciones de adentro.

  • No existe el id resultado, debes cambiarlo por pantalla.


Código:

function init() {

  var uno = document.getElementById('uno');
  var dos = document.getElementById('dos');
  var tres = document.getElementById('tres');

  uno.onclick = function (e) {
    pantalla.textContent = pantalla.textContent + "1";
  }

  dos.onclick = function (e) {
    pantalla.textContent = pantalla.textContent + "2";
  }
  tres.onclick = function (e) {
    pantalla.textContent = pantalla.textContent + "3";

  }
}

init();
<div class="numeros">
  <span class="pantalla" id="pantalla">Pantalla</span>
  <div>
    <div id="uno" class="numero">1</div>
    <div id="dos" class="numero">2</div>
    <div id="tres" class="numero">3</div>
  </div>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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