网易前端微专业，JavaScript程序设计：JS调试

最新推荐文章于 2022-12-20 10:30:59 发布

yanzi1225627

最新推荐文章于 2022-12-20 10:30:59 发布

阅读量2.8k

点赞数 5

分类专栏：前端

本文链接：https://blog.csdn.net/yanzi1225627/article/details/50212773

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本节主要通过一个加法器，介绍JS如何调试。先上代码：

test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>

<div>
    <h2>计算器</h2>

    <div>
        <input type="text" id="num1">
        <span>+</span>
        <input type="text" id="num2">
        <span>=</span>
        <span id="result"></span>
        <button id="add">计算</button>
    </div>
</div>
<script src="./demo.js"></script>
</body>
</html>

demo.js

/**
 * Created by yanzi on 15/12/8.
 */
var num1 = document.getElementById("num1"),
    num2 = document.getElementById("num2"),
    result = document.getElementById("result"),
    btn_add = document.getElementById("add");

btn_add.addEventListener("click", onAddClick, false);
function onAddClick(){
    var a = parseInt(num1.value),
    b = parseInt(num2.value);
    var sum = add(a, b);
    result.innerHTML = sum;
}

/**
 *
 * @param a
 * @param b
 * @returns {*}
 */
function add(a, b){
    return a+b;
}

效果：