如何在特定位置生成按钮？

我有一个菜单，用户在其中进行交互。菜单选项有：创建按钮，编辑按钮，删除按钮。我必须确保当用户选择创建一个新按钮时，您可以激活一个功能;用户必须提供用于将按钮放置在屏幕上的坐标。编辑按钮用于更改已经生成的按钮的位置。删除按钮删除已经生成的按钮。如何在特定位置生成按钮？

<html> 
<body> 

<input type="button" value="create button" onclick="build()"> 
<input type="button" value="delete button" onclick="delete()"> 
<input type="button" value="edit button" onclick="edit()"> 

<script> 

var x, y, z, k; 

function build() 
{ 

var button =document.createElement('button'); 
x = prompt("Inserisci posizione TOP"); 
y = prompt("Inserisci posizione Sinistra"); 
button.style.right = x; 
button.style.left = y; 
button.style.width = 50; 
button.style.height = 50; 
button.setAttribute("value","generated button"); 
document.body.appendChild(button); 

//doesn't function 

} 

function delete() 
{ 

} 

function edit() 
{ 


} 

</script> 

</body> 
</html>

来源

2014-05-19 user3344186

你试图使用位置固定的吗？ –

您的代码存在很多问题。

1.使用保留字delete（将其重命名为myDelete或其他）。

2.该元素现在就在文档流中。 Set .style.position ='absolute';

3.您将右侧和左侧成员设置为x和y。改变它们，使左= x和顶= y。

来源

2014-05-19 14:32:20 enhzflep

尝试添加一个类，如调用函数build（）时的'built'。让这个类给这个按钮一个固定的位置，这样它的坐标就可以在窗口中正确设置。如果你愿意，将按钮放在一个div中，并放在相对位置。然后给'建立'按钮一个绝对的类。

<html> 
<head> 
    <style> 
    .button.built { 
     position: fixed; 
    } 
    </style> 
</head> 
<body> 

    <input type="button" value="create button" onclick="build()"> 
    <input type="button" value="delete button" onclick="deleteButton()"> 
    <input type="button" value="edit button" onclick="edit()"> 

    <script> 

    var x, y, z, k; 

    function build() 
    { 

    var button = document.createElement('button'); 
    x = prompt("Inserisci posizione TOP"); 
    y = prompt("Inserisci posizione Sinistra"); 
    button.style.top = x; 
    button.style.left = y; 
    button.style.width = 50; 
    button.style.height = 50; 
    button.setAttribute("value","generated button"); 
    button.className = button.className + "button built"; 
    document.body.appendChild(button); 

    //doesn't function 

    } 
    </script> 
</body>

来源

2014-05-19 14:35:01

你甚至试过这段代码吗？你提到了我提到的第二点，但忽视了第一点和第三点。 – enhzflep

不起作用... – user3344186

@ user3344186，刚刚指定了一个修复程序来引导您，现在有一个工作示例。 –

如何在特定位置生成按钮？

回答

相关问题