单击时按钮不移动

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

我创建了一个按钮,单击它时必须移动到随机位置。 我创建了一个 html 页面,其中有一个按钮 功能。 调用该函数,我创建了两个变量 heightwidth 来生成随机高度和宽度。但是 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 function button position
1个回答
0
投票

设置按钮的 CSS 位置。

Button_select.style.position = 'fixed';
© www.soinside.com 2019 - 2024. All rights reserved.