点击相应盒子弹出相应数字

最新推荐文章于 2024-07-24 16:53:23 发布

大地的那个土

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量517

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/m0_59199315/article/details/122112282

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建输入框</title>
    <style>
        ol{width: 180px;height: 300px;border: 1px solid blue;overflow: hidden;overflow-y: auto;}
        .text{width: 50px;height: 50px;border: 1px solid black;margin-top: 10px;}
    </style>
    <!-- 制作一个输入框 输入一个整数
         屏幕上从上到下依次显示相应数量的正方形 最上边的编号为1，
         下面的编号为2， 然后依次类推。 点击正方形 弹出alert 
         依次显示相应的编号
     -->
</head>
<body>

    <!-- 
        思路:
         1.var获取需要的元素
         2.先遍历输入框的值  将输入框的值转换为整数输出
         3.将输入框提交内容显示到有序列表中(显示对应数值)
         4.将显示的正方形添加点击事件
         5.遍历显示正方形的个数,alert输出对应的索引下标值
     -->
    <input type="text" class="input">
    <button class="button" value="">提交</button>

    <ol class="ols">
        
    </ol>
    <script>
        var oInput = document.getElementsByClassName("input")[0];
        var oBtn = document.getElementsByClassName("button")[0];
        var ols = document.getElementsByClassName("ols")[0];
        var olis = []
        oBtn.onclick = function(){
            // console.log(Number(oInput.value))
            // ols.innerHTML += "<li class='text'>"+oInput.value+"</li>"
            for(var j=1;j<= Number(oInput.value);j++){
                ols.innerHTML += "<li class='text'>"+ j +"</li>"
            }
            // alert(1)
            // console.log(olis.length);
            olis = ols.getElementsByTagName("li");
            for(let i=0;i<olis.length;i++){
                olis[i].onclick = function(){
                    // alert(this.innerText)
                    alert(i+1)
                }
            }
        }
       
       
    </script>
</body>
</html>

考点 let 和 var的理解也是面试手撕代码的其中一题看效果自己拿代码执行一遍