Detailed explanation of how to multiply and divide two numbers through javascript-JS Tutorial-php.cn

Detailed explanation of how to multiply and divide two numbers through javascript

藏色散人

Release： 2021-08-12 17:53:01

Original

4609 people have browsed it

In the previous article "Calculate the volume of a cylinder through javascript and keep 4 decimal places", I introduced how to calculate the volume of a cylinder through javascript. Interested friends can also learn about it. ~

The Chinese topic of this article is "Writing a JavaScript program to calculate the product and quotient of two numbers (from user input)".

If we need to calculate multiplication and division based on two numbers entered by the user, then we must start by creating a form.

I will give you the complete implementation code directly below:

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

Copy after login

View the effect through the browser as follows:

Detailed explanation of how to multiply and divide two numbers through javascript

Then let’s do whatever we want Enter two numbers to see the results of multiplication and division:

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

Nothing wrong! Completely correct!

In the above code:

document.getElementById(id).value: The value attribute sets or returns the value of the value attribute of the text field.

document.getElementById("result").innerHTM: The innerHTML attribute sets or returns the HTML content of the element (inner HTML).

→Note: HTML DOM defines multiple methods for finding elements. In addition to getElementById(), there are also getElementsByName() and getElementsByTagName(); however, if you need to find a specific element in the document, For elements, the most efficient method is getElementById(). When working with a specific element of a document, it's a good idea to give that element an id attribute, giving it a unique name (within the document) and then using that ID to find the desired element.

There are also key calculation formulas for multiplication and division "num1 * num2" and "num1 / num2".

Finally, I would like to recommend "JavaScript Basics Tutorial" ~ Welcome everyone to learn ~

The above is the detailed content of Detailed explanation of how to multiply and divide two numbers through javascript. For more information, please follow other related articles on the PHP Chinese website!