如果文本框為空或空白，我想在待辦事項串列項中寫入“空”-有解無憂

我制作了我的待辦事項串列應用程式并且一切正常，但是當我添加一個新專案并且文本為空時，li 專案看起來很混亂。我嘗試了不同的解決方案，但它們要么根本不起作用，要么使我的關閉按鈕從專案中消失。當文本框為空且使用空格時，都會發生這種情況（例如：' '、'
'、' '）；如果文本框為空或空白，我想在待辦事項串列項中寫入“空”

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documigga</title>
</head>
<body>
  <main class="centered">
    <h1 onclick="add()">ToDo List JS</h1>
    <h3>js project</h3>
    <form action="">

      <input type="text" name="" id="todoinput" placeholder="Enter the activity you've wented to do">
      <input type="button" value="Add" id="add-button" onclick="add()">
    </form>
    <ul id="todo-list">
      <li class="todo-item">
        Hit the lights
      </li>
      <li class="todo-item">
        Hit the lights
      </li>
      <li class="todo-item">
        Hit the lights
      </li>
    </ul>
  </main>

</body>
<script src="script.js"></script>
</html>

*{
    box-sizing: border-box;
}
body
{
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #dbf9fc;
    font-family: Arial, Helvetica, sans-serif;
    color:rgba(0, 27, 39);
}
#todoinput{
    margin: 5px;
    padding: 5px;
    width: 65%;
}
#add-button{
    padding: 5px;
    margin: 5px;
    width: 5%;
    background-color:rgba(0, 27, 39);
    color: #dbf9fc;
    border: none;
    border-radius: 5px;
    height:1fr;
    cursor: pointer;
}
#add-button:hover{
    background-color: black;
}
#todo-list{
    display: inline-block;
        margin: 0;
        padding: 0;
    list-style: none;
    width: 70%;
}
.todo-item{
    position: relative;
    display: flex;
    justify-content: flex-start;
    background-color:white;
    border: 2px solid black;
    padding: 5px;
    margin: 5px;
}
.closebutton{
    cursor: pointer;
    justify-self: flex-end;
    background-color: #e6772d;
    position: absolute;
    right: 0;
    top: 0;
    color: white;
    float: right;
    padding: 5px;
    width: 30%;
    margin: 0;
}
.closebutton:hover{
    background-color: #c46526;
}
.todo-item-checked{
    position: relative;
    display: flex;
    justify-content: flex-start;
    background-color:rgb(187, 187, 187);
    border: 2px solid black;
    padding: 5px;
    margin: 5px;
    text-decoration: line-through;
}


function check(ev)
{
    ev.target.classList.toggle("todo-item-checked");
    ev.target.classList.toggle("todo-item");
}
function closeevent(event){

        var listitem = this.parentElement;
        listitem.style.display= "none";
    
}

var todoitemlist = document.getElementsByClassName('todo-item');

function addclosebutton(todoitemlist){
    var span = document.createElement("SPAN");
    span.innerHTML = "Close";
    span.className="closebutton";
    span.addEventListener('click',closeevent);
    todoitemlist.appendChild(span);

}


var todoitemlist=document.getElementsByClassName('todo-item');

for(var i=0;i<todoitemlist.length;i  )
{
 addclosebutton(todoitemlist[i]);
 todoitemlist[i].addEventListener('click',check);
}



//add another list item
function add(){
    var listitem = document.createElement("LI");
    listitem.className="todo-item";
    
    var text = document.getElementById('todoinput').value;
    var myul = document.getElementById('todo-list');
    var t = document.createTextNode(text);
    listitem.appendChild(t);
    myul.appendChild(listitem);

    var span = document.createElement("SPAN");
    span.innerHTML = "Close";
    span.className="closebutton";
    listitem.appendChild(span);

    var i;
    addclosebutton(listitem);
    listitem.addEventListener('click',check);
}

uj5u.com熱心網友回復：

您可以洗掉position:absoluteto 關閉按鈕并重新考慮與 flex 一起使用的規則或將 a 設定min-height:2em;為.todo-item。

注意：您插入了兩次關閉按鈕，我評論了 js 的部分內容，因此在添加的每個待辦事項中只插入一個按鈕 ;) 。

沒有絕對的例子：

function check(ev)
    {
        ev.target.classList.toggle("todo-item-checked");
        ev.target.classList.toggle("todo-item");
    }
    function closeevent(event){
    
            var listitem = this.parentElement;
            listitem.style.display= "none";
        
    }
    
    var todoitemlist = document.getElementsByClassName('todo-item');
    
    function addclosebutton(todoitemlist){
        var span = document.createElement("SPAN");
        span.innerHTML = "Close";
        span.className="closebutton";
        span.addEventListener('click',closeevent);
        todoitemlist.appendChild(span);    
    }
    
    
    var todoitemlist=document.getElementsByClassName('todo-item');
    
    for(var i=0;i<todoitemlist.length;i  )
    {
     addclosebutton(todoitemlist[i]);
     todoitemlist[i].addEventListener('click',check);
    }
    
    
    
    //add another list item
    function add(){
        var listitem = document.createElement("LI");
        listitem.className="todo-item";
        
        var text = document.getElementById('todoinput').value;
        var myul = document.getElementById('todo-list');
        var t = document.createTextNode(text);
        listitem.appendChild(t);
        myul.appendChild(listitem);
    
       /* close button is already added elsewhere, empty can be added from here instead adding another close button 
        var span = document.createElement("SPAN");
        span.innerHTML = "Empty";
        listitem.appendChild(span);
        */
    
        var i;
        addclosebutton(listitem);
        listitem.addEventListener('click',check);
    }

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #dbf9fc;
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(0, 27, 39);
}

#todoinput {
  margin: 5px;
  padding: 5px;
  width: 65%;
}

#add-button {
  padding: 5px;
  margin: 5px;
  width: 5%;
  background-color: rgba(0, 27, 39);
  color: #dbf9fc;
  border: none;
  border-radius: 5px;
  height: 1fr;
  cursor: pointer;
}

#add-button:hover {
  background-color: black;
}

#todo-list {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 70%;
}

.todo-item {
  position: relative;
  display: flex; 
  background-color: white;
  border: 2px solid black;
  padding: 5px;
  margin: 5px;
}

.closebutton {
  cursor: pointer; 
  background-color: #e6772d;
  color: white;
  padding: 5px;
  width: 30%;
  margin:-5px  -5px -5px 0 ;
  margin-inline-start:auto;
}

.closebutton:hover {
  background-color: #c46526;
}

.todo-item-checked {
  position: relative;
  display: flex;
  justify-content: flex-start;
  background-color: rgb(187, 187, 187);
  border: 2px solid black;
  padding: 5px;
  margin: 5px;
  text-decoration: line-through;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documigga</title>
</head>

<body>
  <main class="centered">
    <h1 onclick="add()">ToDo List JS</h1>
    <h3>js project</h3>
    <form action="">

      <input type="text" name="" id="todoinput" placeholder="Enter the activity you've wented to do">
      <input type="button" value="Add" id="add-button" onclick="add()">
    </form>
    <ul id="todo-list">
      <li class="todo-item">
        Hit the lights
      </li>
      <li class="todo-item">
        Hit the lights
      </li>
      <li class="todo-item">
        Hit the lights
      </li>
    </ul>
  </main>

</body>
</html>

uj5u.com熱心網友回復：

在這一行中，您要宣告將用作專案文本的值： var text = document.getElementById('todoinput').value;

一種可能的解決方案是使用 OR 運算子，因此如果todoinput的值為空，則text變為'Empty'：

var text = document.getElementById('todoinput').value || 'Empty';

uj5u.com熱心網友回復：

JavaScript如果您使用:empty 偽類，則不需要。

li:empty::before {
  content: 'Empty';
}

<ul id="todo-list">
  <li class="todo-item">
    Hit the lights
  </li>
  <li class="todo-item">
    Hit the lights
  </li>
  <li class="todo-item"></li>
</ul>

js小提琴

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355504.html

標籤：javascript html css 前端

上一篇：我想讓文本內容不隱藏在頂部標題后面，我應該修復哪個css屬性？

下一篇：將交叉png居中到css網格中