Impossible to write in an html page with Javascript Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Impossible to write in an html page with Javascript without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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>

Answer

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>
We are here to answer your question about Impossible to write in an html page with Javascript - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji