Question

该代码没有任何错误，但无效。我同时填写了两个输入，然后单击了按钮，但没有打印出文字。

let listItem = document.getElementById('todoListItem');
let timeInputValue = document.getElementById('timeInput');
let getInputValue = document.getElementById('task');
let errorMessageInput = document.getElementById('errorMsg');

function addTask() {
  if (getInputValue.value.trim() === "") {
    errorMessageInput.textContent = "You haven't added a todo item, please add it in order to show up";
    
    return;
  }

  let myTodoInput = listItem.textContent;
  let myTodoTime = timeInputValue.textContent;
  let myTodoInfo = myTodoInput + ' Time ' + myTodoTime;

  myTodoInfo = getInputValue.value;
}

<div class="myApp border border-info">
  <p class="text-center appTittle">To Do List</p>
  <div class="todoThings" id="todo">
    <ul>
      <li id="todoListItem"></li>
    </ul>
  </div>
  <div class="row mx-auto">
    <p class="mr-3 ml-3 appTaskText">Task</p><input type="text" class="appInput" id="task">
    <p class="mr-1 ml-3 appTaskText">Time</p><input type="number" id="timeInput" min="1" max="24">
  </div>
  <button type="submit" class="btn btn-info btn-sm addButton" id="add" onclick="addTask()">Add task</button>
  <p id="errorMsg" class="text-danger mt-1 mb-1"></p>
</div>

Answer 1

100vh

您还是不打印。没有100vw或let myTodoInput = listItem.textContent; let myTodoTime = timeInputValue.textContent; let myTodoInfo = myTodoInput + ' Time ' + myTodoTime; // line isn't of value as it is overwritten below myTodoInfo = getInputValue.value; // overwrites declaration.`，也没有DOM注入。

Answer 2

这不是完整的解决方案，但是，我已更正了变量以解决未显示任务的基本问题。您应该获得有关此解决方案的帮助并将其扩展。

let listItem = document.getElementById('todoListItem');
let timeInputValue = document.getElementById('timeInput');
let getInputValue = document.getElementById('task');
let errorMessageInput = document.getElementById('errorMsg');

function addTask() {
  if (getInputValue.value.trim() === "") {
    errorMessageInput.textContent = "You haven't added a todo item, please add it in order to show up";

    return;
  }

  let myTodoInput = getInputValue.value;
  let myTodoTime = timeInputValue.value;
  let myTodoInfo = myTodoInput + ' Time ' + myTodoTime;

  myTodoInfo = getInputValue.value;
  listItem.innerHTML = myTodoInfo;
}

<div class="myApp border border-info">
  <p class="text-center appTittle">To Do List</p>
  <div class="todoThings" id="todo">
    <ul>
      <li id="todoListItem"></li>
    </ul>
  </div>
  <div class="row mx-auto">
    <p class="mr-3 ml-3 appTaskText">Task</p><input type="text" class="appInput" id="task">
    <p class="mr-1 ml-3 appTaskText">Time</p><input type="number" id="timeInput" min="1" max="24">
  </div>
  <button type="submit" class="btn btn-info btn-sm addButton" id="add" onclick="addTask()">Add task</button>
  <p id="errorMsg" class="text-danger mt-1 mb-1"></p>
</div>

Answer 3

我解决了我的问题，这就是解决方法

let listItem = document.getElementById('todoListItem');
let timeInputValue = document.getElementById('timeInput');
let getInputValue = document.getElementById('task');
let errorMessageInput = document.getElementById('errorMsg');

function addTask() {
    if (getInputValue.value.trim() === "") {
        errorMessageInput.textContent = "You haven't added a todo item, please add it in order to show up";
        return;
    }

    let myTodoInput = getInputValue.value;
    let myTodoTime = timeInputValue.value;
    let myTodoInfo = myTodoInput + ' at ' + myTodoTime + 'PM';

    listItem.textContent = myTodoInfo;
}

将两个变量合并为一个并与另一个变量相等

3 个答案: