Question

我最近开始学习如何在我的网页中使用JavaScript。我今天的练习是制作一个按钮，它可以给我一个 V形。

创建 V形的代码很好，但是当我尝试将其放入点击处理程序（即oBtn.click = function (){};时，它不起作用）。

在HTML文档中，我有以下代码：

<style>
    div{
        width: 50px;
        height: 50px;
        border: 1px red solid;
        position: absolute;
        line-height: 50px;
        text-align: center;
        margin: 5px;
    }
</style>
<script type="text/javascript">
    window.onload = function (){
        var oBody = document.getElementById('body');
        var aDiv = document.getElementsByTagName('div');
        var oBtn1 = document.getElementById('btn1');

        for (var i = 0; i < 9; i++) {
            oBody.innerHTML += '<div>'+ i +'</div>';
        }
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].style.left =i*50+'px';
        }

        oBtn1.onclick = function (){
        for (var i = 0; i < aDiv.length/2; i++) {
            aDiv[i].style.top = 40+i*50+'px';
        }
        var x = aDiv.length;
        for (var i = 4; i < x; i++) {
            aDiv[i].style.top =x*50-i*50-50+40+'px';    
        }
        };
    };
</script>

Answer 1

我相信这很接近你想要的。在chrome中运行，但在其他浏览器中可能不运行（尤其是IE）。对不起，它不作为一个片段工作。我怀疑试图修改身体中的所有div会长期导致你的麻烦。有几点需要注意：

你不需要通过名字获取身体，你可以使用document.body（我在这里做出假设 - 但是给一个元素id＆＃34; body＆＃34 ;很容易引起混淆）
在尝试从DOM获取数组之前，必须先创建div。
事件处理程序使用通常首选的方法完成。

<html>
<head>
<style>
    div{
        width: 50px;
        height: 50px;
        border: 1px red solid;
        position: absolute;
        line-height: 50px;
        text-align: center;
        margin: 5px;
    }
</style><script>
window.addEventListener("DOMContentLoaded", function () {
    for (var i = 0; i < 9; i++) {
        document.body.innerHTML += '<div>'+ i +'</div>';
    }

    var aDiv = document.getElementsByTagName('div');
    for (var i = 0; i < aDiv.length; i++) {
        aDiv[i].style.left =i*50+'px';
    }

    document.getElementById('btn1').addEventListener("click", function () {
        for (var i = 0; i < aDiv.length/2; i++) {
            aDiv[i].style.top = 40+i*50+'px';
        }
        var x = aDiv.length;
        for (var i = 4; i < x; i++) {
            aDiv[i].style.top =x*50-i*50-50+40+'px';
        }
    });
}, false);
</script>
</head>
<body>
  <input type="button" id="btn1"><br />
</body>
</html>

Answer 2

如果我理解这一点，你想要将'oBtn1.onclick'作为点击事件执行吗？如果是这样，做这样的事情

function buttonClick (){
for (var i = 0; i < aDiv.length/2; i++) {
            aDiv[i].style.top = 40+i*50+'px';
}

oBtn1.addEventListener('click', buttonClick);

只要点击包含id“oBtn1”的元素，它就会执行你的for循环。

Answer 3

你的HTML是什么样的？如果它看起来有点像下面的代码片段，那么它应该正常工作，不过你应该考虑使用addEventListener来做这种事情。

    window.onload = function (){
        var oBody = document.getElementById('body');
        var aDiv = document.getElementsByTagName('div');
        var oBtn1 = document.getElementById('btn1');

        for (var i = 0; i < 9; i++) {
            oBody.innerHTML += '<div>'+ i +'</div>';
        }
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].style.left =i*50+'px';
        }

        oBtn1.onclick = function (){
            for (var i = 0; i < aDiv.length/2; i++) {
                aDiv[i].style.top = 40+i*50+'px';
            }
            var x = aDiv.length;
            for (var i = 4; i < x; i++) {
                aDiv[i].style.top =x*50-i*50-50+40+'px';    
            }
        };
    };

div{
        width: 50px;
        height: 50px;
        border: 1px red solid;
        position: absolute;
        line-height: 50px;
        text-align: center;
        margin: 5px;
    }

<button id="btn1">press</button>
<div id="body"></div>

JavaScript button.onclick不起作用

3 个答案: