Кнопки - как мне переместить одну кнопку вправо от другой кнопки - PullRequest
Новая
       37

Кнопки - как мне переместить одну кнопку вправо от другой кнопки

0 голосов
/ 06 ноября 2019

У меня есть кнопка удаления и одна кнопка редактирования на одной и той же строке. Оба находятся справа, потому что я использовал float right. Теперь кнопка редактирования находится слева от кнопки удаления, и я хочу, чтобы кнопка редактирования находилась всправа от кнопки удаления.

Это может показаться глупым, но я понятия не имею. Отличного дня, и если вы нашли время, чтобы ответить, спасибо! --- HTML --- 

<!DOCTYPE html>
<html>

    <head>
        <title>To Do List</title>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    </head>

    <body>
        <h1 class="header">To Do List</h1>
        <div id="toDoForm">
            <input id="toDoInput" placeholder="What would you like to do?">
            <button id="dynamicButton" type="button">Add</button>
        </div>

        <ol id="toDoList">
        </ol>

        <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
        <script type="text/javascript" src="notify.min.js"></script>

        <script type = "text/javascript" src = "script.js"></script>
    </body>

</html>

--- CSS --- 

.deleteButton {
    font-style: normal;
    color: red;
    float: right;
    font-size: 20px;
    overflow: hidden;
    background-color: black;

    /*display: none !important;*/
}

.deleteButton:hover {
    cursor: pointer;
    font-size: 22px;
}

.editButton {
    background-color: yellow;
    float: right;
    display: inline-block;
}

#dynamicButton {
    height: 35px;
    float: left;
}

.buttonGroupAll {
    display: flex;

}

li{
    margin: 10px 0px;
    font-size: 25px;

    float: left;
    clear: both;
    padding: 5px 0px;
    width: 500px;
    background-color: green;
}

li:hover .deleteButton {
    /*display: inline-block !important;*/
}

#toDoInput {
    font-size: 25px;
    margin: 0px 0px 0px 16px;
    float: left;
}

.header {
    margin-left: 16px;
}

--- JS --- 

//fire add Element Function when addButton is pressed
let addButton = document.getElementById("dynamicButton");
addButton.addEventListener('click',function(){
    addElement();
});
//add Element to OL 
function addElement() {
    let text = $("#toDoInput").val();
    if(!text){
        $.notify("Text is required!",{
            position:"top-left",
            className:"warn"
        });
        return;
    }
    //Create li
    let newItem = document.createElement("li");
    newItem.innerHTML = text;
    //Create del button
    let i = document.createElement("i");
    i.className = "fas fa-times-circle deleteButton";
    //append del button to li
    newItem.appendChild(i);
    //create edit button
    let editButton = document.createElement('i');
    editButton.className = "fas fa-edit editButton";
    //Append edit button to li
    newItem.appendChild(editButton);
    //append li to ol
    document.getElementById("toDoList").appendChild(newItem);
    //clear input value
    document.getElementById("toDoInput").value = "";
}

let deleteButton = document.getElementsByClassName("deleteButton");
let toDoList = document.getElementById("toDoList");

 document.addEventListener('click',function(e){
    if(e.target && e.target.className.includes('deleteButton')){
          console.log(e.target);
          toDoList.removeChild(e.target.parentNode);
     }
 });

var input = document.getElementById("toDoInput");
input.addEventListener("keyup", function(event) {
    console.log(event);
  if (event.keyCode === 13) {
   event.preventDefault();
   addElement();
  }
});

1 Ответ

0 голосов
/ 06 ноября 2019

Все, что вам нужно сделать, это изменить порядок процесса создания вашего элемента, потому что браузер будет отображать HTML сверху вниз.

Также используйте инструменты разработчика для отладки / исследования вашего обработанного интерфейса, чтобы найтиошибки.

Я настоятельно рекомендую https://developers.google.com/web/tools/chrome-devtools

//fire add Element Function when addButton is pressed
let addButton = document.getElementById("dynamicButton");
addButton.addEventListener('click',function(){
    addElement();
});
//add Element to OL 
function addElement() {
    let text = $("#toDoInput").val();
    if(!text){
        $.notify("Text is required!",{
            position:"top-left",
            className:"warn"
        });
        return;
    }
    //Create li
    let newItem = document.createElement("li");
    newItem.innerHTML = text;



//create edit button
    let editButton = document.createElement('i');
    editButton.className = "fas fa-edit editButton";
    //Append edit button to li
    newItem.appendChild(editButton);



//Create del button
    let i = document.createElement("i");
    i.className = "fas fa-times-circle deleteButton";
    //append del button to li
    newItem.appendChild(i);
    //append li to ol
    document.getElementById("toDoList").appendChild(newItem);
    //clear input value
    document.getElementById("toDoInput").value = "";
}



let deleteButton = document.getElementsByClassName("deleteButton");
let toDoList = document.getElementById("toDoList");

 document.addEventListener('click',function(e){
    if(e.target && e.target.className.includes('deleteButton')){
          console.log(e.target);
          toDoList.removeChild(e.target.parentNode);
     }
 });

var input = document.getElementById("toDoInput");
input.addEventListener("keyup", function(event) {
    console.log(event);
  if (event.keyCode === 13) {
   event.preventDefault();
   addElement();
  }
});
...