如何使用javascript编写一个加法程序，从文本框输入两个数字，用alert输出结果？

2024-12-19 10:56:47 JS 648

当使用 JavaScript 编写一个加法程序，从文本框输入两个数字，然后使用 alert 输出结果，通常会涉及以下步骤：

HTML 结构：创建一个简单的 HTML 表单，包含两个文本框和一个按钮。
JavaScript 代码：编写 JavaScript 代码，用于处理用户输入的数字，并执行加法操作。

详细说明：

1. HTML 结构

在 HTML 文件中创建一个表单，包含两个输入框和一个按钮，用户可以在输入框中输入数字，并通过按钮触发加法操作。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Addition Program</title>
</head>
<body>
    <h2>加法程序</h2>
    <p>
        <label for="num1">第一个数字：</label>
        <input type="text" id="num1">
    </p>
    <p>
        <label for="num2">第二个数字：</label>
        <input type="text" id="num2">
    </p>
    <button onclick="addNumbers()">计算总和</button>

    <script src="addition.js"></script>
</body>
</html>

在这个例子中，表单包含两个输入框 (id="num1" 和 id="num2")，用户可以在这里输入要相加的数字。
按钮 (<button onclick="addNumbers()">计算总和</button>) 用于触发加法操作，并调用 JavaScript 函数 addNumbers()。

2. JavaScript 代码

创建一个名为 addition.js 的 JavaScript 文件，用于实现加法逻辑和 alert 输出结果。

javascript
// addition.js

// 获取输入框中的数字，并进行加法操作
function addNumbers() {
    // 获取第一个数字输入框的值
    var num1 = document.getElementById("num1").value;
    
    // 获取第二个数字输入框的值
    var num2 = document.getElementById("num2").value;
    
    // 将字符串类型的输入值转换为数值类型，并进行加法计算
    var result = parseFloat(num1) + parseFloat(num2);
    
    // 弹出对话框显示结果
    alert("结果是：" + result);
}

addNumbers() 函数执行以下操作：
- 通过 document.getElementById() 方法获取 num1 和 num2 输入框的值，并存储在 num1 和 num2 变量中。
- 使用 parseFloat() 将获取的值转换为浮点数，以便进行加法计算。
- 执行加法操作并将结果存储在 result 变量中。
- 使用 alert() 方法弹出一个对话框，显示计算得到的结果。

总结

通过这个例子，你可以学习如何使用 JavaScript 处理用户输入的数字，执行基本的加法操作，并通过 alert 方法将结果输出给用户。这种方法适用于简单的数学计算或用户输入的简单交互。