单击时按钮不移动-解网

问：

我创建了一个按钮，当它被点击时，它必须移动到一个随机位置。我创建了一个带有按钮的 html 页面，该按钮具有功能。调用该函数，我创建了两个变量 height 和 width 来生成随机高度和宽度。但是 document.style.top 物业没有按预期工作。请帮我一个适当的解决方案。谢谢

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Move Button</title>
</head>
<body>
    
    <script src="Script.js" type="text/Javascript"> </script>
    <button id="my-button" onclick= "MoveText()" >Click me</button>


    <style>
        body {
             background-color: rgb(62, 59, 229);
             color:yellow;
             font-weight: 500;
             letter-spacing: 2;
             font-size: 35px;
             
         }
     </style>
 
    
    
</body>
</html>

Javascript 文件（Script： .js）：

function MoveText() {    
    const Button_select=document.getElementById('my-button')
    console.log(Button_select)

    var height=String(Math.floor(Math.random()*500))+'px'
    var width=String(Math.floor(Math.random()*900))+'px'

    Button_select.style.top = height;
    Button_select.style.left = width;


    Button_select.style.color = 'Red'
}

我也尝试了内联 Javascript，但没有用。我还在样式部分添加了位置属性，并尝试将其设置为绝对和相对，但没有用。我希望按钮在单击时出现在随机位置。

JavaScript HTML 函数按钮位置

单击时按钮不移动

Button is not moving when clicked

评论

评论