Question 42941 in Html Question posted in
Some basic documentation can be found here.

New to Javascript. Trying to write a code for the hypotenuse of a triangle. Nothing happens when pressing submit in the DOM – Html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    
        <label id="aLabel">Side A:</label><br>
        <input type="text" id="aTextBox"><br>
        <label id="bLabel">Side B:</label><br>
        <input type="text" id="bTextBox"><br>
        <button type="button" id="submit">submit</button><br>    
        <label id="cLabel"></label><br> 
       
        <script src="index.js"></script>
  
</body>
</html>


let a; 
let b;

// Calculate the length of the hypotenuse using the Pythagorean theorem
document.getElementById("submit").onClick = function(){

    a = document.getElementById("aTextBox").value;
    a = Number(a)

    b = document.getElementById("bTextBox").value;
    b = Number(b);

    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    
    document.getElementById("cLabel").innerHTML = c;

    console.log("The hypotenuse of the triangle is: " + c);
}

I believe I acquired all the ids in the DOM correctly and also imported the js file correctly(it is named index.js and in the same folder, in fact it auto populates when typing)
I’m stumped, it should be a simple equation, but I don’t know what I’m doing wrong or what alternatives to use. I really appreciate any coding help the community can give.

Tags:

3

Answers


  1. 0

    It is not working because the of the onclick you added after you get the submit button. I rewrote the code for you. Please let me know if this works and is what you are looking for.

    let submitBtn = document.getElementById("submit");

submitBtn.addEventListener("click", () => {

    let a = document.getElementById("aTextBox").value;
    let b = document.getElementById("bTextBox").value;

    a = Number(a);
    b = Number(b);

    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("cLabel").innerHTML = c;
    console.log("The hypotenuse of the triangle is: " + c);


})
    Login or Signup to reply.
  2. 0

    Change onClick to onclick

    document.getElementById("submit").onclick = function(){

    a = document.getElementById("aTextBox").value;
    a = Number(a)

    b = document.getElementById("bTextBox").value;
    b = Number(b);

    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

    
    document.getElementById("cLabel").innerHTML = c;

    console.log("The hypotenuse of the triangle is: " + c);
}
    Login or Signup to reply.
  3. 0

    your error here is that your using onClick writted in camel case, you can fix your error by changing onClick to onclick, simply replace your javascript code by this following code:

    let a; 
let b;

// Calculate the length of the hypotenuse using the Pythagorean theorem
document.getElementById("submit").onclick = function(){
    a = document.getElementById("aTextBox").value;
    a = Number(a)
    b = document.getElementById("bTextBox").value;
    b = Number(b);
    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("cLabel").innerHTML = c;
    console.log("The hypotenuse of the triangle is: " + c);
}

    Note: in this JavaScript code, its a bad practice to declare a variables outside the place were you are using them instead you can refactor your code to be more optimized :

    • Make the a and b variables inside the function were you are using them.
    • Use the Number function directly when you are getting the value to make your code easy to understand.

    Your code will then be like that:

    // Assign the submit button to a const variable 
const submit = document.getElementById("submit");

// Add an event listener to the submit button.
submit.addEventListener('click', function() {
    let a = Number(document.getElementById("aTextBox").value);
    let b = Number(document.getElementById("bTextBox").value);
    let c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    const cLabel = document.getElementById("cLabel");
    cLabel .innerHTML = c;
    console.log("The hypotenuse of the triangle is: " + c);
});

    This way your code became more readable. try always to make your code cleaner as much as possible so that debugging errors will be an easy task for you. Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search