Почему моя переменная javascript отображается в браузере? - PullRequest
Новая
       10

Почему моя переменная javascript отображается в браузере?

0 голосов
/ 24 января 2020

Я пытаюсь создать список дел с html элементами, отображаемыми с использованием javascript.

Идея состоит в том, что при нажатии кнопки появится поле ввода текста с флажком, пользователь введет свой элемент для выполнения, а затем отобразится в качестве элемента контрольного списка в браузере.

Я в основном там, за исключением ввода текста в поле ввода, вместо того, чтобы отображаться как элемент контрольного списка, вместо этого он будет отображаться как переменная (в частности, $ {todo.text})

Пожалуйста см. мой код ниже. Любая помощь приветствуется.

Javascript


const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

var listItem = document.querySelector('.todo-item')

newTodoBtn = document.getElementById('newTodoButton')

function newTodo(text) {
  const todo = {
    text,
    checked: false,
    id: Date.now(),
  };

  todoItems.push(todo);

  const list = document.querySelector('.todolist')
  var addform = document.createElement("form")
      addform.classList.add("todo-form")
  const form = document.querySelector('.todo-form');


    listItem = document.createElement('li');//li
    var itemtext = document.createElement("span");
    var itemvalue = document.createTextNode("${todo.text}");
    var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.value = 0;
        checkbox.name = "todo[]";
        checkbox.id = "${todo.id}";
    var textbox = document.createElement('input');
        textbox.type = "text";
        textbox.classList.add("todo-input");
 form.addEventListener('submit', event => {
   itemtext.appendChild(itemvalue)
   event.preventDefault()
   const input = document.querySelector('.todo-input')
   const text = input.value.trim();
   if (text !== '') {
     newTodo(text);
     input.value = '';
     input.focus();
   }
 });
};

HTML

<html>
  <head>
    <title>TODO App</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <button onclick ="newTodo()" id="newTodoButton" class="button center">New TODO</button>
      <ul id="todo-list" class="todolist">

      </ul>
      <form class="todo-form">

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

CSS 

* {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

span:hover {
  cursor: pointer;
}

li:hover {
  border: 1px solid hotpink;
}

li {
  padding: 5px;
}

input[type="checkbox"]:checked {
    box-shadow: 0 0 0 3px hotpink;
}

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}

1 Ответ

0 голосов
/ 24 января 2020

Попробуйте это 

 var itemvalue = document.createTextNode(`${todo.text}`);
...