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

我有一個菜單，用戶在其中進行交互。菜單選項有：創建按鈕，編輯按鈕，刪除按鈕。我必須確保當用戶選擇創建一個新按鈕時，您可以激活一個功能;用戶必須提供用於將按鈕放置在屏幕上的座標。編輯按鈕用於更改已經生成的按鈕的位置。刪除按鈕刪除已經生成的按鈕。如何在特定位置生成按鈕？

<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，剛剛指定了一個修復程序來引導您，現在有一個工作示例。 –

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

回答

相關問題