我的 Java 代码应该列出一个列表，但它没有 [关闭]答案

【问题标题】：My java code should make a list but it doesn't [closed]我的 Java 代码应该列出一个列表，但它没有 [关闭]
【发布时间】：2022-08-04 07:53:59
【问题描述】：

我的 java 代码不起作用我正在观看待办事项列表的代码视频，当我单击按钮时，此代码应该列出一个列表，但它没有帮助 enter image description here

<script>
document.querySelector(\'#push\').onclick =

     function() {
    if (document.querySelector(\'#newtask input\').
         value.length == 0){
alert(\"please enter  task\");
       }
     else {

    document.querySelector(\'#task\').innerHTML 
   += \'<div class =\"task\"><span id =\"taskname\">$
   {document.querySelector(\"#newtask input\").
   value}</span> <button 
   class =\"delete\">×</button></div>\';
    }
</script>
</body>

</html>

java和javascript是两种不同的语言

标签： javascript

【解决方案1】：

步骤1：创建文本节点

第2步：将其附加到正文中（我已经在#main for div 中完成了）

const main = document.querySelector("#main");
const inputText = document.querySelector("#textInput");
const taskBtn = document.querySelector("#addTask");

function addTask(taskData) {
  const task = document.createTextNode(taskData);
  main.appendChild(task);
  main.appendChild(document.createElement("br"));
}
taskBtn.addEventListener("click", () => {
  if (inputText.value == "") {
    alert("please enter task!!");
  } else {
    addTask(inputText.value);
    inputText.value = "";
  }
});

<div id="main">
  <input type="text" id="textInput" placeholder="Enter task" />
  <button id="addTask">Add task</button><br />
</div>

【讨论】：

【解决方案2】：

虽然接受的答案中的方法确实产生了所需的输出，但它并没有回答关于为什么代码不起作用的原始问题。它实际上有几个问题：

首先，您的点击处理函数声明丢失了它正在关闭的};。您可以通过linting tools（例如JSHint）运行代码来捕获此类错误。
其次，您不应该暴力破解元素的onclick 方法。这样做只允许附加一个功能。相反，您可以使用Element.addEventListener 将处理程序附加到click 事件。
最后，您在设置innerHTML 时尝试使用placeholder expression ${...}。这些只能在template literals 内部使用。用于创建此类变量的字符应该是反引号 ( ` ) 但是，您使用了单引号 ( ' )。

编写代码的正确方法是：

document.querySelector('#push').addEventListener('click', event => {
  if (document.querySelector('#newtask input').value.length == 0) {
    alert("please enter task");
  } else {
    document.querySelector('#task').innerHTML += `
      <div class="task">
        <span id ="taskname">
          ${document.querySelector("#newtask input").value}
        </span>
        <button class ="delete">×</button>
      </div>
    `;
  }
});

【讨论】：