我正在创建一个待办事项列表，我有两个ul列表，一个具有要执行的ID，另一个具有已完成的ID。我想要这样，以便当您创建列表项并单击对勾时，它会转移到已完成的列表，而当您再次单击对勾时，它会转移回到待办事项列表。
但是，现在的问题是，当我单击一次勾号时，它将移至完成的列表，但是当我再次单击勾号时，它没有执行任何操作？您可以通过创建一些列表项，然后单击加号按钮来进行测试。
我正在使用ternary operator。我究竟做错了什么？
因为这似乎不起作用：
var target = [id === "to-do"]
? document.getElementById("completed")
: document.getElementById("to-do");
var target = [id === "to-do"]
? document.getElementById("completed")
: document.getElementById("to-do");
var completeSVG =
'<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"> <g> <path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406 l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411 C39.251,14.885,38.62,14.922,38.252,15.336z"/> </svg>';
var removeSVG =
'<svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve"> <polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 …我有一个高度为 10px 和宽度为 100px 的输入元素。但如果用户输入的数据长度超过该宽度，则不会显示溢出。溢出时如何使输入元素的高度增加？这可以用css实现吗？如果没有，那么 Vanilla JS 将是首选。
HTML：
<input type="text" id="input">
CSS：
#input{
margin-left: 10px;
border-left: transparent;
border-right: transparent;
border-top: transparent;
border-bottom: 1px solid black;
width: 100px;
height: auto;
min-height: 10px;
}