Javascript console log clearing itself after if statement evaluates to false

I have the following simple code from an exercise in Modern Javascript used to calculate a sphere's volume, it contains a part which checks to make sure that a value has been entered for radius.

I put in a negative number to test the function, and it works, but I was interested in what would be displayed in the console, so I checked. I end up seeing an error flash in the log and then disappear - too quick to read.
Is this just what occurs when an if statement evaluates to false? Why is this error displaying and then being cleared almost immediately? I'm aware I could use another way to debug this (a.k.a. using console.log or logging the problem by some other means), I'm just interested as to why this error disappears.

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Volume of a Sphere Calculator</title>
    <!--[if lt IE 9]>
    <script src=".js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- sphere.html -->
    <form action="" method="post" id="theForm">
        <fieldset>
            <p>Use this form to calculate the volume of a sphere.</p>
            <div>
                <label for="radius">Radius</label>
                <input type="text" name="radius" id="radius" required></div>
            <div>
                <label for="volume">Volume</label>
                <input type="text" name="volume" id="volume"></div>
            <div>
                <input type="submit" value="Calculate" id="submit"></div>
        </fieldset>
    </form>
    <script src="js/sphere.js"></script>
</body>
</html>

JS:

function calculate() {
    'use strict';

    var volume;
    var radius = document.getElementById('radius');

    if (radius && (radius.value > 0)){

        volume = (4/3) * Math.PI * Math.pow(radius.value, 3);

    }
    volume = volume.toFixed(4);

    document.getElementById('volume').value = volume;

    return false;
}

function init() {
    'use strict';
    var theForm = document.getElementById('theForm');
    theForm.onsubmit = calculate;
}

window.onload = init;

I have the following simple code from an exercise in Modern Javascript used to calculate a sphere's volume, it contains a part which checks to make sure that a value has been entered for radius.

I put in a negative number to test the function, and it works, but I was interested in what would be displayed in the console, so I checked. I end up seeing an error flash in the log and then disappear - too quick to read.
Is this just what occurs when an if statement evaluates to false? Why is this error displaying and then being cleared almost immediately? I'm aware I could use another way to debug this (a.k.a. using console.log or logging the problem by some other means), I'm just interested as to why this error disappears.

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Volume of a Sphere Calculator</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode./svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- sphere.html -->
    <form action="" method="post" id="theForm">
        <fieldset>
            <p>Use this form to calculate the volume of a sphere.</p>
            <div>
                <label for="radius">Radius</label>
                <input type="text" name="radius" id="radius" required></div>
            <div>
                <label for="volume">Volume</label>
                <input type="text" name="volume" id="volume"></div>
            <div>
                <input type="submit" value="Calculate" id="submit"></div>
        </fieldset>
    </form>
    <script src="js/sphere.js"></script>
</body>
</html>

JS:

function calculate() {
    'use strict';

    var volume;
    var radius = document.getElementById('radius');

    if (radius && (radius.value > 0)){

        volume = (4/3) * Math.PI * Math.pow(radius.value, 3);

    }
    volume = volume.toFixed(4);

    document.getElementById('volume').value = volume;

    return false;
}

function init() {
    'use strict';
    var theForm = document.getElementById('theForm');
    theForm.onsubmit = calculate;
}

window.onload = init;

Share Improve this question edited Jul 2, 2020 at 9:04 braX 11.8k5 gold badges22 silver badges37 bronze badges asked Jan 3, 2013 at 23:21 mcabrams 6841 gold badge6 silver badges23 bronze badges

1 if radius.value <= 0, then volume is undefined. undefined does not have a method toFixed, so it will throw an error. Since this is in the onsubmit handler, it never reaches the return false line, which prevents the default action of a form submission which is to perform a post on the current page. TLDR: Initialize volume to 0. – Shmiddty Commented Jan 3, 2013 at 23:33

Add a ment |

4 Answers 4

Sorted by: Reset to default 6

Because this is the top Google match for my problem of console.log output appearing and quickly disappearing, this happened to me because I either had an empty set of label tags out of place or a form with no action. Deleting those tags caused JavaScript and console.log() to work like it was supposed to.

Adding another solution as a Google search for "javascript log disappearing" brought me here.

Page refreshing/navigation was the problem.

Selecting "Preserve log" in the console settings as per mateuszb's ment solved the issue.

Because undefined does not have a method toFixed, which throws an error, preventing Calculate from ever reaching return false;

Since that line is never reached, the form submits, which (generally speaking) posts the form to the same page.

When the page reloads, the console is reset (I believe this depends on the specific browser).

To fix this, initialize volume to 0.

You can use el.preventDefault(); in your callback function

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Javascript console log clearing itself after if statement evaluates to false - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)