按钮onclick事件不会触发

问题描述 投票:0回答:2

请帮忙。任务是:“编写一个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事件时,该函数可以工作,但它不适用于按钮。我做错了什么?

javascript html button onclick
2个回答
1
投票

我认为你正在调用一个保留的方法名称,你也使用字符串值而不是变量。改为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>

1
投票

名称animate已被DOM使用。只需更改功能的名称即可。它会工作。

并且无需设置函数参数,因为您正在按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>
© www.soinside.com 2019 - 2024. All rights reserved.