Impossible to write in an html page with Javascript

Question

I created an html page with a form that returns a function to calculate the gravitational force between two planets.

The program works as I want but when I ask it to display the result in an html tag it doesn't work. And sorry for my English, I'm a French student

function formulaire(){
    
    var masse1 = document.getElementById("masse1").value;
    var masse2 = document.getElementById("masse2").value;
    var d = document.getElementById("distance").value;
    var distancePlanete = Math.pow(d, 2);
    var G = 6.67428* Math.pow(10,-11);
    var resultat = G*(masse1 * masse2)/distancePlanete;
    document.getElementById("print").innerHTML = resultat;
    
}

<body>
        <h1 id="titrecalcul">Le calcul:</h1>
        <form method="post" id="audd">
            <label for="masse1" id="styleTxMasse1">Masse planète 1 en kg</label> : <input type="number" id="masse1" step="0.00000000" min="0.00000000">
            <br><br>
            <label for="masse2" id="styleTxMasse2">Masse planète 2 en kg</label> : <input type="number" id="masse2" step="0.00000000" min="0.00000000">
            <br><br>
            <label for="distance" id="styleTxDistance">Distance entre les deux planètes en km</label> : <input type="number" id="distance" step="0.00000000" min="0.00000000">
            <br><br>
            <input type="submit" value="Calculer" onclick="formulaire()">
        </form>
        <div id="print"></div>

        <script src="script/script.js"></script>
</body>

I don't see that you're doing anything to stop your form from being submitted and reloading the page, losing all input. — j08691
– j08691, Commented Sep 18, 2019 at 15:36
What happens instead, @Quikiki? "Doesn't work" is a very poor description. — Armen Michaeli
– Armen Michaeli, Commented Sep 18, 2019 at 15:38
Moved your snippet to the editor assuming that script/script.js is the javascript it would contain, but like j0 pointed out, if you change your button to type="button" it won't clear out like you're seeing because you're not submitting the post. — Chris W.
– Chris W., Commented Sep 18, 2019 at 15:42
Thanks for your help, I was wondering if you had any sites to offer me to learn javascript and c++ correctly. — Quikiki
– Quikiki, Commented Sep 18, 2019 at 17:41

joshua miller · Accepted Answer · 2019-09-18 15:46:49Z

You have to prevent the form from submitting and redirecting. Try this:

function formulaire(event){
    event.preventDefault();
    var masse1 = document.getElementById("masse1").value;
    var masse2 = document.getElementById("masse2").value;
    var d = document.getElementById("distance").value;
    var distancePlanete = Math.pow(d, 2);
    var G = 6.67428* Math.pow(10,-11);
    var resultat = G*(masse1 * masse2)/distancePlanete;
    document.getElementById("print").innerHTML = resultat;
}

<body>
        <h1 id="titrecalcul">Le calcul:</h1>
        <form method="post" id="audd">
            <label for="masse1" id="styleTxMasse1">Masse planète 1 en kg</label> : <input type="number" id="masse1" step="0.00000000" min="0.00000000">
            <br><br>
            <label for="masse2" id="styleTxMasse2">Masse planète 2 en kg</label> : <input type="number" id="masse2" step="0.00000000" min="0.00000000">
            <br><br>
            <label for="distance" id="styleTxDistance">Distance entre les deux planètes en km</label> : <input type="number" id="distance" step="0.00000000" min="0.00000000">
            <br><br>
            <input type="submit" value="Calculer" onclick="formulaire(event)">
        </form>
        <div id="print"></div>

        <script src="script/script.js"></script>
</body>

drtechno · Accepted Answer · 2019-09-18 15:57:32Z

function formulaire(){

var masse1 = document.getElementById("masse1").value;
var masse2 = document.getElementById("masse2").value;
var d = document.getElementById("distance").value;
var distancePlanete = Math.pow(d, 2);
var G = 6.67428* Math.pow(10,-11);
var resultat = G*(masse1 * masse2)/distancePlanete;
document.getElementById("print").innerHTML = resultat;
document.getElementById("masse1").innerHTML ="";
document.getElementById("masse2").innerHTML ="";
document.getElementById("distance").innerHTML ="";

}

  
<body>
    <h1 id="titrecalcul">Le calcul:</h1>
    <div id="audd">
        <label for="masse1" id="styleTxMasse1">Masse planète 1 en kg</label> : <input type="number" id="masse1" step="0.00000000" min="0.00000000">
        <br><br>
        <label for="masse2" id="styleTxMasse2">Masse planète 2 en kg</label> : <input type="number" id="masse2" step="0.00000000" min="0.00000000">
        <br><br>
        <label for="distance" id="styleTxDistance">Distance entre les deux planètes en km</label> : <input type="number" id="distance" step="0.00000000" min="0.00000000">
        <br><br>
        <button  onclick="formulaire()">Calculer</button>
    </div>
    <div id="print"></div>

Instead of writing it in html form format, use pure JavaScript instead:

function formulaire(){

var masse1 = document.getElementById("masse1").value;
var masse2 = document.getElementById("masse2").value;
var d = document.getElementById("distance").value;
var distancePlanete = Math.pow(d, 2);
var G = 6.67428* Math.pow(10,-11);
var resultat = G*(masse1 * masse2)/distancePlanete;
document.getElementById("print").innerHTML = resultat;
document.getElementById("masse1").innerHTML ="";
document.getElementById("masse2").innerHTML ="";
document.getElementById("distance").innerHTML ="";

}    
<body>
    <h1 id="titrecalcul">Le calcul:</h1>
    <div id="audd">
        <label for="masse1" id="styleTxMasse1">Masse planète 1 en kg</label> : <input type="number" id="masse1" step="0.00000000" min="0.00000000">
        <br><br>
        <label for="masse2" id="styleTxMasse2">Masse planète 2 en kg</label> : <input type="number" id="masse2" step="0.00000000" min="0.00000000">
        <br><br>
        <label for="distance" id="styleTxDistance">Distance entre les deux planètes en km</label> : <input type="number" id="distance" step="0.00000000" min="0.00000000">
        <br><br>
        <button  onclick="formulaire()">Calculer</button>
    </div>
    <div id="print"></div>

    <script src="script/script.js"></script>

you're welcome! Javascript is great to use for single page stuff like this IMHO.

Ritesh Khandekar · Accepted Answer · 2019-09-18 17:07:02Z

Or Use return statement:

function formulaire(){
    
    var masse1 = document.getElementById("masse1").value;
    var masse2 = document.getElementById("masse2").value;
    var d = document.getElementById("distance").value;
    var distancePlanete = Math.pow(d, 2);
    var G = 6.67428* Math.pow(10,-11);
    var resultat = G*(masse1 * masse2)/distancePlanete;
    document.getElementById("print").innerHTML = resultat;
    return false;
}

<body>
        <h1 id="titrecalcul">Le calcul:</h1>
        <form method="post" id="audd" onsubmit="return formulaire()">
            <label for="masse1" id="styleTxMasse1">Masse planète 1 en kg</label> : <input type="number" id="masse1" step="0.00000000" min="0.00000000">
            <br><br>
            <label for="masse2" id="styleTxMasse2">Masse planète 2 en kg</label> : <input type="number" id="masse2" step="0.00000000" min="0.00000000">
            <br><br>
            <label for="distance" id="styleTxDistance">Distance entre les deux planètes en km</label> : <input type="number" id="distance" step="0.00000000" min="0.00000000">
            <br><br>
            <input type="submit" value="Calculer" onclick="formulaire()">
        </form>
        <div id="print"></div>

        <script src="script/script.js"></script>
</body>

Collectives™ on Stack Overflow

Impossible to write in an html page with Javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related