CODEWITHSUNDEEP
javascripthtmlforms
Quikiki
Quikiki

Reputation: 23

Impossible to write in an html page with Javascript

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>

Upvotes: 0

Views: 102

Answers (3)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

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>

Upvotes: 0

drtechno
drtechno

Reputation: 323

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>

Upvotes: 0

joshua miller
joshua miller

Reputation: 1756

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>

Upvotes: 5

Related Questions