'JavaScript onclick event handlers not functioning properly

For some reason, my onclick JavaScript event handlers are not functioning properly.

Here is my markup, script and style:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadratic Root Finder</title>

<script>
document.ready = function() {
    document.getElementById('calculate').onClick.calculateQuad()
    {
        var inputa = document.getElementById('variablea').value;
        var inputb = document.getElementById('variableb').value;
        var inputc = document.getElementById('variablec').value;
        
        root = Math.pow(inputb,2) - 4 * inputa * inputc;
        root1 = (-inputb + Math.sqrt(root))/2*inputa
        root2 = (-inputb + Math.sqrt(root))/2*inputa 
        
        document.getElementById('root1').value = root1;
        document.getElementById('root2').value = root2;
        if(root<'0')
        {
            alert('This equation has no real solution.')
        }
        else {
            if(root=='0')
            {
                document.getElementById('root1').value = root1
                document.getElementById('root2').value = 'No Second Answer'
            }
            else {
                document.getElementById('root1').value = root1
                document.getElementById('root2').value = root1
                }
            }
    };
    document.getElementById('erase').onClick.document.getElementById('form1').reset();
}
</script>

<style>
#container
{
    text-align: center;
}
</style>

</head>

<body>
<div id="container">
<h1>Quadratic Root Finder!</h1>
<form id="form1">
    a:<input id="variablea" value="" type="text">
    <br/>
    b:<input id="variableb" value="" type="text">
    <br />
    c:<input id="variablec" value="" type="text">
    <br />
    <input id="calculate" value="Calculate!" type="button">
    <input id="erase" value="Clear" type="button">
    <br />
    <br />
    Roots:
    <br />
    <input id="root1" type="text" readonly>
    <br />
    <input id="root2" type="text" readonly>
</form>
</div>
</body>
</html>

Is there an explainable reason?

Solution 1:^[1]

There's not really a "ready" event like that. If you want to do things at what's commonly thought of as the "ready" point, you'll need to use a framework. Otherwise, you can use "onload" instead of "ready".

If, for example, you were using jQuery, you'd do this:

$(function() {
    var inputa = document.getElementById('variablea').value;
    var inputb = document.getElementById('variableb').value;
    var inputc = document.getElementById('variablec').value;
    // etc ...
});

Without that, you'd do:

window.onload = function() {
  // all your stuff
};

Also:

 ... .onclick.calculateQuad() {

makes no sense at all.

Solution 2:^[2]

This is wrong
document.getElementById('calculate').onClick.calculateQuad()
It must be
document.getElementById('calculate').onClick = function ()

And this is wrong too
document.getElementById('erase').onClick.document.getElementById('form1').reset();
Fixing:
document.getElementById('erase').onClick = function(){document.getElementById('form1').reset();}

Solution 3:^[3]

.onClick.document.getElementById('form1').reset()

I think you want to turn this into:

.onclick = function () { document.getElementById('form1').reset(); }

Solution 4:^[4]

if you can use Jquery

$(document).ready(function() { $("#variablea").click(function(element) { ///....operation }); });

you can use $(" input").click(function(element){}) operate all of input elements

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pointy
Solution 2
Solution 3	Explosion Pills
Solution 4	Clover

'JavaScript onclick event handlers not functioning properly

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]