0

Hola buenas estoy recién comenzando en la programación con JavaScript pasa que por querer practicar código estoy haciendo una calculadora con HTML / CSS / JS pero resulta que al momento de ver si en el span de resultado me marca dicho resultado o botón que oprimí no me marca nada con lo cual no se si esta mal enlazado JavaScript o simplemente estoy utilizando mal el JavaScript y me estoy equivocando en algo X. PD: No esta terminado pero a esta altura me debería mostrar la información en la pantalla (creo)

<!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="stylo.css">
    <title>Calculadora</title>
</head>

<body>
    <table class="calculadora">
        <tr>
            <td colspan="4">
                <span id="resultado"></span>
            </td>
        </tr>
        <tr>
            <td><button id="siete">7</button></td>
            <td><button id="ocho">8</button></td>
            <td><button id="nueve">9</button></td>
            <td><button id="division">/</button></td>
        </tr>
        <tr>
        <td><button id="cuatro">4</button></td>
        <td><button id="cinco">5</button></td>
        <td><button id="seis">6</button></td>
        <td><button id="multiplicacion">*</button></td>
    </tr>


<tr>
        <td><button id="uno">1</button></td>
        <td><button id="dos">2</button></td>
        <td><button id="tres">3</button></td>
        <td><button id="resta">-</button></td>
    </tr>



 <tr>
        <td><button id="igual">=</button></td>
        <td><button id="reset">C</button></td>
        <td><button id="cero">0</button></td>
        <td><button id="suma">+</button></td>
    </tr>
</table>



 <script src="funcionalidad.js"></script>
</body>
</html>

function init(){
// Variables
var resultado = document.getElementById("resultado");
var reset = document.getElementById("reset");
var suma = document.getElementById("suma");
var resta = document.getElementById("resta");
var multiplicacion = document.getElementById("multiplicacion");
var division = document.getElementById("division");
var igual = document.getElementById("igual");
var uno = document.getElementById("uno");
var dos = document.getElementById("dos");
var tres = document.getElementById("tres");
var cuatro = document.getElementById("cuatro");
var cinco = document.getElementById("cinco");
var seis = document.getElementById("seis");
var siete = document.getElementById("siete");
var ocho = document.getElementById("ocho");
var nueve = document.getElementById("nueve");
var cero = document.getElementById("cero");

//Eventos
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"
}
cuatro.onclick = function(e){
    resultado.textContent = resultado.textContent + "4"
}
cinco.onclick = function(e){
    resultado.textContent = resultado.textContent + "5"
}
seis.onclick = function(e){
    resultado.textContent = resultado.textContent + "6"
}
siete.onclick = function(e){
    resultado.textContent = resultado.textContent + "7"
}
ocho.onclick = function(e){
    resultado.textContent = resultado.textContent + "8"
}
nueve.onclick = function(e){
    resultado.textContent = resultado.textContent + "9"
}
cero.onclick = function(e){
    resultado.textContent = resultado.textContent + "0"
}
reset.onclick = function(e){
    resetear();
}
suma.onclick = function(e){
    operandoa = resultado.textContent;
    operacion = "+";
    limpiar();
}

}

1 respuesta 1

1

si es ese tu archivo pues obviamente esta mal, dado que el js debe de estar en otro archivo llamado funcionalidad.js por lo tanto no esta anexado...

en el caso de que si lo tengas anexado tambien hay otro error y es que metes todo el codigo dentro de una funcion pero nunca la llamas... al final de la funcion osea por fuera de la funcion la debes llamar, asi: init();...

lo otro es que tienes bastantes eventos y te sugiero los resumas en uno solo, para mejorar el rendimiento de la pagina...

document.addEventListener('click', (e)=>{
      if(e.target.id == 'tuId'){
          //tus instrucciones
      }else if(e.target.id == 'tuOtroId'){
          //tus instrucciones
      }
  }
);

y por ultimo, revisa bien tu codigo que se podria optimizar, feliz noche espero te ayude :D

4
  • Hola bro lo tengo bien anexado es mas tengo el mismo código que este amigo del video ya que de ahí me iba guiando y a el con este mismo código le iba todo de maravilla por eso era mi duda bro, cabe destacar que este código que me enviaste no entiendo nada pero de lo que es nada jaja estoy recién comenzando igual agradezco tu ayuda youtube.com/watch?v=uGohVJhgSN8&ab_channel=JonathanMelgoza
    – BJOTA
    Commented el 16 dic. 2020 a las 0:24
  • 1
    esta bien lo que te dijo y por mas que estes aprendiendo toma el consejo a futuro , para empezar con que invoques init() al final de tu js , te funciona , como bien te respondio jesus, amen Commented el 16 dic. 2020 a las 0:30
  • Muchísimas gracias por la ayuda, tomaré los concejos :D
    – BJOTA
    Commented el 16 dic. 2020 a las 0:49
  • efectivamente como dijo el compañero, lo escencial es llamar a la funcion para que sirva, los demas que te dije son solo consejos para mejorar el codigo Commented el 16 dic. 2020 a las 2:43

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.