javascript - 无法用 Javascript 编写 html 页面

标签 javascript html forms

我创建了一个 html 页面,其中的表单返回一个函数来计算两个行星之间的引力。

该程序按我想要的方式工作,但是当我要求它在 html 标记中显示结果时,它不起作用。抱歉我的英语不好,我是一名法国学生

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>

最佳答案

您必须阻止表单提交和重定向。试试这个:

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>

关于javascript - 无法用 Javascript 编写 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57996378/

相关文章:

javascript - 输入字段的总和不能大于账户余额

javascript - 从 Canvas 转换后如何将图像作为表单的一部分提交?

css - 控制输入​​提示

c# - 向 2 个不同的列表框显示信息 - 使用树

java - 使用 Thymeleaf 和 Spring Boot 在表中实现一个按钮,该按钮从表中返回数据

javascript - Angular2 应用程序中的 Deezer API

javascript - 如何使用 javascript 从 JSON 访问单个对象?

JavaScript 无法将 input.min、input.max、input.value 识别为整数

Javascript:更改输入文件类型?

php - 如何使用php表单中可变数量的字段更新sql表