CODEWITHSUNDEEP
javascript
Beaver
Beaver

Reputation: 51

Problem with variables and functions in JavaScript

I have a little problem with JS. I want to make a simple script that calculate the results of a second grade equation like X^2+X+Q. The problem is that I don't know how to manipulate variables, so I'm not getting the result I want. Here's the code.

var a, b, c;

function input_a(a) {
    a = prompt("Enter your a");
}

function input_b(b) {
    b = prompt("Enter your b");
}

function input_c(c) {
    c = prompt("Enter your c");
}

function calculate(a, b, c) {
    var delta = (b*b) - (4*a*c);
    if (delta < 0) {
        document.getElementById("result").innerHTML = "Impossible, delta is < 0";
    } else if (delta > 0) {
        document.getElementById("result").innerHTML = delta;
    } else {
        document.getElementById("result").innerHTML = "ERROR";
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
    background-color: rgb(70, 69, 69);
    width: 100%;
    display: inline-block;
    text-align: center;
    padding: 30px 0px;
}

.title {
    color: rgb(255, 255, 255);
}

.example {
    color: white;
}

.button_wrap {
    text-align: center;
    background-color: rgb(230, 174, 34);
    width: auto;
}

.button {
    display: inline-block;
    background-color: rgb(70, 69, 69);
    width: auto;
    height: auto;
    padding: 20px;
    margin: 10px 30px;
}

.start {
    display: block;
    background-color: rgb(70, 69, 69);
    margin: 15px auto 0px auto;
    padding: 20px;
}

.result_wrapper {
    text-align: center;
    padding-top: 100px;
    background-color: rgb(187, 141, 25);
    width: auto;
}

#result {
    display: inline-block;
    width: auto;
    height: auto;
    background-color: rgb(70, 69, 69);;
    padding: 20px;
    margin: 10px;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Equazioni</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <header class="header">
        <h1 class="title">EQUATIONS</h1> <br>
        <h2 class="example">X^2  +-  X  +-  Q</h2>
    </header>

    <div class="button_wrap">
        <button onclick="input_a()" class="button">INSERT YOUR A</button>
        <button onclick="input_b()" class="button">INSERT YOUR B</button>
        <button onclick="input_c()" class="button">INSERT YOUR C</button>
        <button onclick="calculate()" class="start">CALCULATE</button>
    </div>

    <div class="result_wrapper">
        <p id="result"></p>
    </div>

</body>

</html>

I want to ask the user for a, b and c, and then apply the mathematic rules to calculate delta (Then I will calculate X1 and X2, but I haven't implemented it yet). But for some reason it doesn't work. I started learning JS a few days ago, so probably it's a stupid error, but I don't know how to fix it. I understand languages like C++ quite a bit, but I never used JS.

The script actually prints ERROR, so delta must be equal to 0. If it is, it means that in the process of calculating it I made a mistake.

Upvotes: 0

Views: 150

Answers (4)

Beaver
Beaver

Reputation: 51

Ok, casting the result of Prompt into a number worked, I didn't know that this function returned a string. BTW I assumed that the function wasn't working because after the two if checks I put a "default" else, that was printing ERROR if the delta was not > nor < 0, so that I knew if something was wrong. Thanks for the help!

edit: After thinking about it I think you meant that it can also be undefined other than simply 0.

Upvotes: 0

Tiago
Tiago

Reputation: 1

The window.prompt() that you used give numbers in STRING format, you have to make it be a number before trying to do any calculation to do it you can use the parseFloat(argument) or parseInt(argument) remember that parseInt will turn the number in an integer. Another error was that you added arguments to the functions with the same name as the variables a, b, c, but when calling the calculate() function you weren't passing any, so it was always considering them undefined.

var a, b, c;

function input_a() {
    a = parseFloat(prompt("Enter your a"));
    console.log(a);
}

function input_b() {
    b = parseFloat(prompt("Enter your b"));
}

function input_c() {
    c = parseFloat(prompt("Enter your c"));
}

function calculate() {
    var delta = (b*b) - (4*a*c);
    if (delta < 0) {
        document.getElementById("result").innerHTML = "Impossible, delta is < 0";
    } else if (delta > 0) {
        document.getElementById("result").innerHTML = delta;
    } else {
        document.getElementById("result").innerHTML = "ERROR";
    }
}

This is the piece of code I fixed, good luck. https://jsfiddle.net/sz0kuxgr/12/

Upvotes: 0

Allen Al-Shamali
Allen Al-Shamali

Reputation: 101

here is a solution that can help you:

let a, b, c;

function input_a() {
    a = Number(prompt("Enter your a"));
    console.log(a);
}

function input_b() {
    b = Number(prompt("Enter your b"));
    console.log(b);
}

function input_c() {
    c = Number(prompt("Enter your c"));
}

function calculate() {
    let delta = b * b - 4 * a * c;
    console.log(delta);
    if (delta < 0) {
        document.getElementById("result").innerHTML =
            "Impossible, delta is < 0";
    } else if (delta > 0) {
        document.getElementById("result").innerHTML = delta;
    } else {
        document.getElementById("result").innerHTML = "ERROR";
    }
}

Don't use var, use const and let, because they are block scoped. and also transform the promts in numbers, just in case.

Upvotes: 0

David
David

Reputation: 218827

The script actually prints ERROR, so delta must be equal to 0.

That conclusion isn't true at all. It could also be null, or undefined, or in this case... NaN. Don't assume, validate:

console.log(delta);

The reason is because you re-declare local variables and never define them.

This:

function input_a(a)

Should be this:

function input_a()

Repeat for all of the other functions. This is because having those parameters means that any time you reference that variable within the function you're referencing the one that was passed to it, not the global one. And you don't pass anything to the functions, but are instead trying to use global variables.

Upvotes: 3

Related Questions