Блог

Главная - Вопросы по программированию - Как определить, установлены ли флажки в JavaScript?

Как определить, установлены ли флажки в JavaScript?

#javascript #html #express #ejs #web-development-server

Вопрос:

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

Чтобы решить эту проблему, у меня был 2-d массив, в котором хранился элемент списка и значение bool, т. Е. Проверено ли значение или нет. Поэтому в запросе post (пользователь, желающий добавить новый элемент в форму), после добавления элемента в массив, я использовал селектор запросов, чтобы извлечь все флажки и проверить, были ли они отмечены галочками или нет. И если бы они были, я просто изменил их значение bool как истинное.

В HTML-коде я использовал EJS, чтобы добавить условия JS if-else. Используя эти условия, установите/снимите флажок в зависимости от значения bool.

Код Javascript работает нормально, когда я пытаюсь отладить его на консоли Chrome. Но он выдает мне 500 ОШИБОК, когда я запускаю его через сервер, как обычный код. Пожалуйста, помогите мне устранить ошибку. Я добавляю коды JS и HTML соответственно ниже.

Трассировка стека:

 ReferenceError: document is not defined
at D:WorkCodeProjectsWebDevTo-Do-Listapp.js:48:21
at Layer.handle [as handle_request] (D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesexpresslibrouterlayer.js:95:5)
at next (D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesexpresslibrouterroute.js:137:13)
at Route.dispatch (D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesexpresslibrouterroute.js:112:3)
at Layer.handle [as handle_request] (D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesexpresslibrouterlayer.js:95:5)
at D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesexpresslibrouterindex.js:281:22
at Function.process_params (D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesexpresslibrouterindex.js:335:12)
at next (D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesexpresslibrouterindex.js:275:10)
at D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesbody-parserlibread.js:130:5
at invokeCallback (D:WorkCodeProjectsWebDevTo-Do-Listnode_modulesraw-bodyindex.js:224:16)
 
 // GLOBAL
var items = new Array;

app.post("/", (req, res) => {
     // request the data sent through post request and append it to the array 

     var temp = new Array(2);
     temp[0] = req.body.listItem;
     temp[1] = false;
     items.push(temp);

     // check if the user has already checked the box
     const checks = document.querySelectorAll("ul input")
     for (var i = 0; i < checks.length; i  ) {
         if (checks[i].checked) {
             items[i][1] = true;
         }
     }
     // now redirect to the index page (don't worry about passing the array since it's global)
     res.redirect("/");
 }); 
 <ul>
  <% for(var i =0; i < newItems.length; i  ){ %>
    <div class="item">
      <% if(newItems[i][1]){ %>
        <input type="checkbox" checked>
      <% } else{ %>
        <input type="checkbox">
      <% } %>
        <p>
          <%= newItems[i][0] %>
        </p>
    </div>
  <% } %>
</ul>

Комментарии:

1. Какова трассировка стека для ошибки 500?

2. Я добавил журнал ошибок, я надеюсь, что он называется трассировкой стека, так как я не уверен 🙂

3. То, что вы пытаетесь сделать, невозможно. Вы пытаетесь получить доступ к DOM (браузеру) в Node.js окружающая среда.

4. @DanZuzevich Я знаю, что могу сделать это в обычном файле сценария, поэтому я предположил, что мы могли бы сделать это и в среде NodeJS.

5. К сожалению, вы не можете.

Метки: ,