Как разместить значение setattribute на веб-странице и обернуть текст, чтобы кнопка не двигалась - PullRequest
Новая
       0

Как разместить значение setattribute на веб-странице и обернуть текст, чтобы кнопка не двигалась

0 голосов
/ 30 мая 2018

Я использую значение setAttribute для создания кнопки удаления - как мне отодвинуть кнопку от введенного текста и обернуть текст таким образом, чтобы кнопка находилась в том же месте?

Вот js fiddle -JS, похоже, не работает на нем, но он работает на моем ПК

https://jsfiddle.net/lewisjames101/aqxwuwbg/

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>ToDoList</title>
    </head>
    <body>
         <h1>To do list</h1>
         <form id="todoform">
         <input id = "todoinput">
         <button type="button" onclick="todolist()">Add</button>
          </form>
          <ol id="todolist">
          </ol>
            <script src="main.js"></script>
    </body>
</html>


JS
function todolist(){
    var item = document.getElementById("todoinput").value
    var text = document.createTextNode(item)
    var newitem = document.createElement("li")
    newitem.appendChild(text)
    document.getElementById("todolist").appendChild(newitem)
    document.getElementById ('todoinput').value = "";

    var removeTask = document.createElement('input');
    removeTask.setAttribute('type', 'button');
    removeTask.setAttribute("value", "Remove task");
    removeTask.setAttribute("id", "removeButton");
    removeTask.addEventListener('click',
     function(e) {
       confirm ("Are you sure?"); newitem.parentNode.removeChild(newitem);
    }, false);
    newitem .appendChild(removeTask);
}

This is what I wanna achive

I would like line 6 to then wrap so the remove buttons are always aligned

1 Ответ

0 голосов
/ 30 мая 2018

Добавить следующий стиль 

#removeButton {
  margin-left: auto;
}
ol li {
  margin-top: 10px;
  width: 100%; 
}
ol li div {
  display: flex;
  align-items: flex-start;
}


 
#removeButton {
  margin-left: auto;
}
ol li {
  margin-top: 10px;
  width: 100%; 
}
ol li div {
  display: flex;
  align-items: flex-start;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>ToDoList</title>
    <script>
    function todolist(){
var item = document.getElementById("todoinput").value
var text = document.createTextNode(item)
var newitem = document.createElement("li")
var newitemDiv = document.createElement("div")

var newitemSpan = document.createElement("span")
newitemSpan.appendChild(text)
newitemDiv.appendChild(newitemSpan)
newitem.appendChild(newitemDiv)
document.getElementById("todolist").appendChild(newitem)
document.getElementById ('todoinput').value = "";
var removeTask = document.createElement('input');
removeTask.setAttribute('type', 'button');
removeTask.setAttribute("value", "Remove task");
removeTask.setAttribute("id", "removeButton");
removeTask.addEventListener('click',
 function(e) {
   confirm ("Are you sure?"); newitem.parentNode.removeChild(newitem);
}, false);
newitemDiv .appendChild(removeTask);
}

    </script>
</head>
<body>
     <h1>To do list</h1>
     <form id="todoform">
     <input id = "todoinput">
     <button type="button" onclick="todolist()">Add</button>
      </form>
      <ol id="todolist">
      </ol>
        
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...