Hello, everyone, my name is wangzirui32, today we will learn how to write a simple multiplication calculator using form + js script, first create an HTML file, enter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript乘法计算器</title>
<script src="demo.js"></script>
</head>
<body>
<h1>JavaScript计算器</h1>
<p>这是一个JavaScript乘法计算器</p>
<form name="myform">
<p>乘数1：<input type="text" value="" name="number1" /></p>
<p>乘数2：<input type="text" value="" name="number2" /></p>
<button onclick="getForm()">计算</button>
</form>
</body>
</html>
In the above code, we loaded the js file demo.js, which we will write later. The name attribute of the form defines the name of the form, input accepts user input, and the function in the onclick event of the button is in demo.js.
Then create a js file demo.js in the same directory, the code is as follows (do not understand the comments):
// 定义getForm函数
function getForm(){
// 获取myform中number1和number2的值
var number1 = myform.number1.value;
var number2 = myform.number2.value;
// 计算
var answer = number1 * number2;
// 弹窗输出结果
alert(number1 + " * " + number2 + " = " + answer);
}
This is OK, how about it, have you learned it? If you are interested, you can bookmark it and like it! Bye bye!