var和let示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>建议留言板</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;

        }

    </style>
</head>
<body>
    <h1>简易留言板</h1>
    <div id="box">

    </div>
    <textarea name="" id="msg" cols="30" rows="10"></textarea>
    <input type="button" id="btn" value="留言">
    <button onclick="sum()">统计</button>
</body>
<script type="text/javascript">

    var ul = document.createElement("ul");
    var box = document.getElementById("box");
    box.appendChild(ul);

    var btn = document.getElementById("btn");

    var msg = document.getElementById("msg");

    var count = 0;

    btn.onclick = function () {
        var li = document.createElement("li");

        li.innerHTML = msg.value + "<span>   X</span>"

        var lis = document.getElementsByTagName("li");
        if(lis.length == 0){
            ul.appendChild(li);
            count ++;
        }else{
            ul.insertBefore(li,lis[0]);
            count ++;
        }
        msg.value = "";

        var spans = document.getElementsByTagName("span");
        // 方法一let：
        // for( let i = 0; i< spans.length; i++){
        //
        //     spans[i].onclick = function () {
        //         ul.removeChild(spans[i].parentNode);
        //         console.log(typeof this);
        //         // console.log(typeof spans[i]);
        //         count --;
        //     }
        //
        // }
        // 方法二var：
        for( var i = 0; i< spans.length; i++){

            spans[i].onclick = function () {
                ul.removeChild(this.parentNode);
                console.log(typeof this);
                // console.log(typeof spans[i]);
                count --;
            }

        }

    }

    function sum() {
        alert("一共发布了"+count+"条留言");
    }

</script>
</html>

猜你喜欢