Explication détaillée de la façon de multiplier et diviser deux nombres via javascript-js tutoriel-php.cn

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

4500 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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