按钮未正确调用函数

Button not calling function correctly

本文关键字：调用 函数 按钮      更新时间：2023-09-26

我试图在单击按钮时调用函数，但由于某些原因，按钮不会调用该函数。Dreamweaver没有显示任何语法错误。有人能告诉我为什么按钮失灵吗？

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    </head>
   <head>
   <title></title>

<script type="text/javascript">
        var imgObj = 0;
        var imgObj1 = 0;
        var animate;
        var animate1;
        function init(){
           imgObj = document.getElementById('red');
           imgObj.style.position= 'relative';
           imgObj.style.left = '0px';
           imgObj1 = document.getElementById('blue');
           imgObj1.style.position = 'relative';
           imgObj1.style.left = '0px';
        }
        function moveRight(){
           imgObj.style.left = parseInt(imgObj.style.left = 0) + Math.floor((Math.random() * 100) + 1) + 'px';
           animate = setTimeout(moveRight(), 1000); 
           imgObj1.style.left = parseInt(imgObj1.style.left = 0) + Math.floor((Math.random() * 100) + 1) + 'px';
           animate1 = setTimeout(moveRight(), 1000); 
           if (imgObj.style.left >= 1000px || imgObj1.style.left >= 1000px)
            {
                break;
                else if
                {
                    imgObj.style.left>= 1000
                    MessageBox.show("The Red Car has won the Race!");
                }
                else
                {
                    MessageBox.show("The Blue Car has won the Race!");
                }
            }
        }           
</script>
</head>
<body onload = "init()">
   <form>
    <input type="button" value="Start" onclick="moveRight()" />
    <br/><br/><br/><br><br/><br/><br/>
    <img id="red" src="redcar.png" alt="Car 1"/>
    <br/><br/><br/><br>
    <img id="blue" src="bluecar.png" alt ="Car 2" />
    </form>
</body>
</html>

不幸的是，错误太多，很难知道从哪里开始。你的问题的第一个答案是按钮什么都没做，因为你的代码没有编译。我不知道为什么Dreamweaver没有报告错误。Chrome的开发工具非常乐意这样做

这是一个"工作"版本：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var imgObj = 0;
var imgObj1 = 0;
var animate1;
function init(){
   imgObj = document.getElementById('red');
   imgObj.style.position= 'relative';
   imgObj.style.left = '0px';
   imgObj1 = document.getElementById('blue');
   imgObj1.style.position = 'relative';
   imgObj1.style.left = '0px';
}
function moveRight(){
   var redPosition = parseInt(imgObj.style.left);
   imgObj.style.left = redPosition + Math.floor((Math.random() * 20) + 1) + 'px';
   var bluePosition = parseInt(imgObj.style.left);
   imgObj1.style.left = bluePosition + Math.floor((Math.random() * 20) + 1) + 'px';
   if (redPosition >= 1000 || bluePosition >= 1000)
   {
        if (redPosition >= 1000) {
            alert("The Red Car has won the Race!");
        }
        else
        {
            alert("The Blue Car has won the Race!");
        }
        return;
    }
    animate1 = setTimeout(moveRight, 50);
}
</script>
</head>
<body onload = "init()">
<form>
    <input type="button" value="Start" onclick="moveRight()" />
    <br/><br/><br/><br><br/><br/><br/>
    <img id="red" src="redcar.png" alt="Car 1"/>
    <br/><br/><br/><br>
    <img id="blue" src="bluecar.png" alt ="Car 2" />
</form>
</body>
</html>
相关文章：