Maison > interface Web > js tutoriel > Explication détaillée de la façon de multiplier et diviser deux nombres via javascript

Explication détaillée de la façon de multiplier et diviser deux nombres via javascript

藏色散人
Libérer: 2021-08-12 17:53:01
original
4638 Les gens l'ont consulté

Dans l'article précédent "Calculer le volume d'un cylindre via javascript et conserver 4 décimales", je vous ai présenté comment calculer le volume d'un cylindre via javascript. Les amis intéressés peuvent également en apprendre davantage ~

Version chinoise de. cet article Le sujet est "Écrire un programme JavaScript pour calculer le produit et le quotient de deux nombres (à partir de la saisie de l'utilisateur)".

Si nous devons calculer la multiplication et la division sur la base de deux nombres saisis par l'utilisateur, nous devons alors commencer par créer un formulaire.

Je vais vous donner le code d'implémentation complet directement ci-dessous :

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
    <style type="text/css">
        body {margin: 30px;}
    </style>
</head>
<body>
<form>
    第一个数 : <input type="text" id="firstNumber" /><br>
    第二个数: <input type="text" id="secondNumber" /><br>
    <input type="button" onClick="multiplyBy()" Value="相乘" />
    <input type="button" onClick="divideBy()" Value="相除" />
</form>
<p>计算结果是: <br>
    <span id = "result"></span>
</p>
<script>
    function multiplyBy()
    {
        num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
        document.getElementById("result").innerHTML = num1 * num2;
    }

    function divideBy()
    {
        num1 = document.getElementById("firstNumber").value;
        num2 = document.getElementById("secondNumber").value;
        document.getElementById("result").innerHTML = num1 / num2;
    }
</script>
</body>
</html>
Copier après la connexion

Voir l'effet via le navigateur comme suit :

Explication détaillée de la façon de multiplier et diviser deux nombres via javascript

Ensuite, saisissons simplement deux nombres pour voir les résultats du calcul de multiplication et de division :

GIF 2021-8-12 星期四 下午 3-49-48.gif

Rien de mal ! Tout à fait vrai !

Dans le code ci-dessus :

document.getElementById(id).value : L'attribut value définit ou renvoie la valeur de l'attribut value du champ de texte. document.getElementById(id).value: value属性设置或返回文本字段的value属性的值。

document.getElementById("result").innerHTM : innerHTML属性设置或返回元素的HTML内容(内部HTML)。

→注:HTML DOM定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName();不过,如果需要查找文档中的一个特定的元素,最有效的方法是getElementById()。在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

还有关键计算相乘和相除的公式“num1 * num2”和“num1 / num2

document.getElementById("result").innerHTM : L'attribut innerHTML définit ou renvoie le contenu HTML de l'élément (HTML interne).

→Remarque : HTML DOM définit plusieurs méthodes pour rechercher des éléments en plus de getElementById(), il existe également getElementsByName() et getElementsByTagName() ; Cependant, si vous avez besoin de rechercher un élément spécifique dans le document, la méthode la plus efficace est getElementById(). Lors de la manipulation d'un élément spécifique d'un document, c'est une bonne idée de donner à cet élément un attribut id, en lui donnant un nom unique (dans le document), puis d'utiliser cet ID pour trouver l'élément souhaité. Il existe également des formules de calcul clés pour la multiplication et la division "num1 * num2" et "num1 / num2".

Enfin, je voudrais recommander "🎜🎜Tutoriel JavaScript de base🎜🎜" à tout le monde~ Bienvenue à tous pour apprendre~🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal