2014-05-19 4 views
0

У меня есть меню, в котором пользователь взаимодействует с ним. Параметры меню: Кнопка «Создать», кнопку «Изменить», кнопку «Удалить». Я должен убедиться, что когда пользователь решит создать новую кнопку, вы активируете функцию; Затем пользователь должен указать координаты, которые используются для размещения кнопки на экране. Кнопка «Изменить» используется для изменения положения уже сгенерированной кнопки. Кнопка удаления удаляет кнопку, уже сгенерированную.Как сгенерировать кнопку в определенном положении?

<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> 
+0

вы пытались использовать это положение исправить? –

ответ

0

С кодом возникает ряд проблем.

1. Использование зарезервированного слова delete (переименуйте его в myDelete или еще что-нибудь).

2. Элемент будет просто сидеть в потоке документа прямо сейчас. Установите .style.position = 'absolute';

3. Вы устанавливаете правый и левый элементы как x и y. Измените их так, чтобы left = x и top = y.

0

Попробуйте добавить класс, например 'built', когда вызывается функция build(). Пусть этот класс фиксирует положение кнопки, так что координаты будут правильно установлены в окне. Если вы хотите, оберните кнопки в 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> 

+0

Вы даже попробовали этот код? Вы указали точку № 2, о которой я упоминал, но пренебрегли заботой о # 1 и № 3. – enhzflep

+0

не функция ... – user3344186

+0

@ user3344186, только что указали исправление ранее, чтобы вести вас, теперь есть рабочий пример. –

Смежные вопросы