Calculator Bhaskara Javascript

Asked

Viewed 687 times

2

Well, I’m starting to program and my question is this: 1) I created this HTML page to calculate a simple bhaskara formula:

let valorA = parseFloat(document.getElementById('#a').value);
var numA = valorA;

let valorB = parseFloat(document.getElementById('#b').value);
var numB = valorB;

let valorC = parseFloat(document.getElementById('#c').value);
var numC = valorC;

function calc() {
    var delta=((Math.pow(numB,2))-((4*numA)*numC));
    var raiz=Math.sqrt(delta);
    var base=2*numA;
    // validar a, b, c
    if (delta < 0)
    {
        alert("Nao tem resposta")
    }
    else if(delta === 0)
    {
    var deltaX = (numB*(-1)) / base;
    document.getElementById('x1').innerHTML = deltaX;
    }
    else
    {
        var x1=(-numB+raiz)/base;
        var x2=(-numB-raiz)/base;
        document.getElementById('delta').innerHTML = delta;
        document.getElementById('x1').innerHTML = x1;
        document.getElementById('x2').innerHTML = x2;
    }
}

let button = document.querySelector('#buttonC');
button.addEventListener('click', calc);
<body>
    <p>Calculadora de Bhaskara</p>
<form action="" method="post" name="bhaskara">
    <label id="label-a">A: </label>
    <input id="a" type="number" value="1">

    <label id="label-b">B: </label>
    <input id="b" type="number" value="1">

    <label id="label-c">C: </label>
    <input id="c" type="number" value="1">
    <br>
    <button id="buttonC">Calcular</button>
    <br>
</form>
<section>
    <label id="label-delta">DELTA: </label>
    <input id="delta" type="text" disabled>

    <label id="label-x1">X1: </label>
    <input id="x1" type="text" disabled>

    <label id="label-c">X2: </label>
    <input id="x2" type="text" disabled>
</section>
    <script src="script.js"></script>
</body>

I wanted to enter the values of A/B and C, press the calculate and return button for disabled input’s.

It may sound silly, but I’m four hours trying to make it work and nothing.

javascript html
  • 2

    The assignment of value, valueB and valueC should not be within the Calc function?

  • I also think you should, so as not to create variables of global scope

1 answer

2

Utilize

Document.getElementById('x2').value= x2;

and make changes to logic to disable the buttons using:

Document.getElementById("myBtn"). disabled = true;

as the example describes Button disabled Property

<section>
    <label id="label-delta">DELTA: </label>
    <input class='calc-button' id="delta" type="text">

    <label id="label-x1">X1: </label>
    <input class='calc-button' id="x1" type="text">

    <label id="label-c">X2: </label>
    <input class='calc-button' id="x2" type="text">
</section>

<script type='text/javascript'>
    var buttons = document.querySelectorAll(".calc-button")

    //JS puro
    for(i = 0; i < buttons.length; i++){
        buttons[i].disabled = true;
    }

</script>

SE6

buttons.map(button => button.disabled = true)

jQuery

 $('.calc-button').each(function(){
     this.prop('disabled', true);
 })

Jquery + ES6

 $('.calc-button').each(() => this.prop('disabled', true))

Don’t forget to run this method after "set" the values of inputs

  • I’m sorry, but I still don’t understand.

  • I put codes to make it easy

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.