个人中心
gpt4 book ai didi

javascript - 按钮-如何将一个按钮移到另一个按钮的右侧

转载 作者：行者123 更新时间：2023-11-27 23:06:04 26 4
gpt4 key购买 nike

我在同一行上有一个删除按钮和一个编辑按钮。两者都在右边，因为我使用了向右浮动。现在，编辑按钮在删除按钮的左边，我希望编辑按钮位于删除按钮的右侧。

这可能看起来很愚蠢，但我不知道。祝你今天愉快，如果你花时间回答，谢谢!---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();
  }
});

最佳答案

您所要做的就是更改元素创建过程的顺序，因为浏览器将从上到下呈现 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();
  }
});

关于javascript - 按钮-如何将一个按钮移到另一个按钮的右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58733870/

26 4 0
文章推荐： css - 对齐不同 block 的子元素
文章推荐： C++ : Reading a "non-txt" file
文章推荐： javascript - 你如何每隔几个轮子滴答声或每隔几秒调用一个轮子函数？
文章推荐： c++ - hwnd 窗口中的文本格式和字体更改
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com