Question

请帮助。任务是：“编写一个JavaScript程序，通过定期从字符串末尾删除一个字母并将其附加到前面，来向正确的方向旋转字符串'w3resource'。”

function moveIt() {
    var element = document.getElementById("target");
    var textNode = element.childNodes[0];
    var text = textNode.nodeValue;

    setInterval(function() {
        text = text[text.length - 1] + text.substring(0, text.length - 1);
        textNode.nodeValue = text;
    }, 500);
}

<body>    
  <button type="button" onclick="animate('target')">click to animate</button>    
  <p id="target">w3resource</p>
</body>

当我将其应用于document.body中的onload事件时，该函数有效，但不适用于按钮。我做错了什么？

Answer 1

DOM已经使用了名称animate。只需更改函数的名称即可。它将起作用。

由于您通过id获取元素，因此无需设置函数的参数。

function moveIt() {
    var element = document.getElementById("target");
    var textNode = element.childNodes[0];
    var text = textNode.nodeValue;

    setInterval(function() {
        text = text[text.length - 1] + text.substring(0, text.length - 1);
        textNode.nodeValue = text;
    }, 500);
}

<body>
  <button type="button" onclick="moveIt()">click to animate</button>
  <p id="target">w3resource</p>
</body>

Answer 2

我认为您正在调用保留的方法名称，也使用的是字符串值而不是变量。更改为foo，它可以正常工作。

<body>

<button type="button" onclick="foo('target')">click to animate</button>

<p id="target">w3resource</p>
<script>
function foo(target){
            var element = document.getElementById(target);
            var textNode = element.childNodes[0];
            var text = textNode.nodeValue;

            setInterval(function() {
                text = text[text.length - 1] + text.substring(0, text.length - 1);
                textNode.nodeValue = text;
            }, 500);
        }
</script>
</body>

按钮onclick事件不会触发

2 个答案: