说setAttribute为null时出错JavaScript

dzhpxtsq  于 2023-11-15  发布在  Java
关注(0)|答案(1)|浏览(201)

我仍然是新的JS，也就是说，我试图使一个任务列表网页，用户可以提交项目，并在这些项目有一个任务列表，每个与到期日要完成。
我使用UUID v4来为项目和任务生成ID标签，但是当试图将ID标签设置为项目或任务时，setAttribute函数返回null。我有很多JS文件，我使用npm和webpack来管理它。
下面是相关的JS和HTML：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>To Do</title>
  7. </head>
  8. <body>
  9.     <div id="container">
  10.         <!-- project side bar panel -->
  11.         <div class="proj-panel">
  12.             <h3 class="proj-header">Projects</h3>
  13.             <div class="proj-container">
  14.                 <!-- projects in here -->
  15.                 <div class="project">Starter Project</div>
  16.             </div>               
  17.             <div class="add-proj-container">
  18.                 <div class="add-box">
  19.                     <span role="button" class="+ project-link" id="add-project-bttn">+</span>
  20.                 </div>
  21.             </div>
  22.         </div>
  23.         <!-- main content container -->
  24.         <div class="main-panel">
  25.             <div class="proj-main-container">
  26.                 <div class="proj-info-container">
  27.                     <div class="proj-info">
  28.                         <div class="proj-info-name">Starter Project</div>
  29.                         <div class="proj-info-description">test description</div>
  30.                     </div>
  31.                     <div class="proj-icon-container">
  32.                         <div class="icon-box">
  33.                             <img role="button" src="../src/assests/imgs/folder-edit-outline.svg" class="proj-edit-icon">
  34.                         </div>
  35.                         <div class="icon-box">
  36.                             <img role="button" src="../src/assests/imgs/trash-can-outline.svg" class="proj-trash-icon">
  37.                         </div>
  38.                     </div>
  39.                     <!-- Need a way to edit proj info after adding  -->
  40.                 </div>
  41.             </div>
  42.             
  43.             <div class="task-container">
  44.                 <!-- daily tasks will go in here -->
  45.                 <div class="task">
  46.                     <div class="task-content">
  47.                         <div class="task-area">
  48.                             <div class="checkmark-proj"></div>
  49.                             <div class="task-name">Example task</div>
  50.                         </div>
  51.                         <div class="task-area">
  52.                             <div class="due-date"> in 0 days</div>
  53.                             <!-- need forum pop up on edit button -->
  54.                             <img src="../src/assests/imgs/pencil-outline.svg" class="edit-task">
  55.                             <img src="../src/assests/imgs/trash-can-outline.svg" class="delete-task">
  56.                         </div>
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.             <div class="add-task-container">
  61.                 <div class="add-box">
  62.                     <span role="button" class="+ project-link" id="task-add">+</span>
  63.                 </div>
  64.             </div>
  65.         </div>
  66.         <!-- forum for add project & and task down here -->
  67.         <div id="add-proj-container">
  68.             <form class="forum-container" id="add-proj-forum">
  69.                 <h2>New Project</h2>
  70.                 <div class="input-content">
  71.                     <input type="text" id="proj-name" name="proj-name" required placeholder="Enter project name here">
  72.                 </div>
  73.                 <div class="forum-bttns">
  74.                     <button type="submit" id="add-proj-forum-bttn" class="btn">Add Project</button>
  75.                     <button type="button" id="close-add-proj-forum-bttn" class="btn cancel">Close</button>
  76.                 </div>
  77.             </form>
  78.         </div>
  79.         <!-- Add task forum -->
  80.         <div id="add-task-forum-container">
  81.             <form class="forum-container" id="add-task-forum">
  82.                 <h2> New Task</h2>
  83.                 <div class="input-content">
  84.                     <label for="task-name">
  85.                         <b>Task Name</b>
  86.                     </label>
  87.                     <input type="text" id="task-name" name="task-name" required placeholder="Write the task name here...">
  88.                 </div>
  89.                 <div class="row-container">
  90.                     <div class="input-content">
  91.                         <label for="task-due-date">
  92.                             <b>Due Date</b>
  93.                         </label>
  94.                         <input type="date" id="task-due-date" required name="task-due-date">
  95.                     </div>
  96.                     <div class="input-content">
  97.                         <label for="task-project">
  98.                             <b>Project</b>
  99.                         </label>
  100.                         <select name="task-project" id="task-project">
  101.                             <option value="Inbox" selected>Inbox</option>
  102.                         </select>
  103.                     </div>
  104.                     <div class="forum-bttns">
  105.                         <button type="submit" id="add-task-forum-bttn" class="btn">Add Project</button>
  106.                         <button type="button" id="close-add-task-forum-bttn" class="btn cancel">Close</button>
  107.                     </div>
  108.                 </div>
  109.             </form>
  111.         </div>
  113.     </div>
  115. </body>
  117. <script defer src="./main.js"></script>
  118. <!-- Templates to be copied -->
  120. <template id="project-template">
  121.     <div class="proj-info-container">
  122.         <div class="proj-info">
  123.             <div class="proj-info-name"></div>
  124.             <div class="proj-info-description"></div>
  125.         </div>
  126.         <div class="proj-icon-container">
  127.             <div class="icon-box">
  128.                 <img role="button" src="../src/assests/imgs/folder-edit-outline.svg" class="proj-edit-icon">
  129.             </div>
  130.             <div class="icon-box">
  131.                 <img role="button" src="../src/assests/imgs/trash-can-outline.svg" class="proj-trash-icon">
  132.             </div>
  133.         </div>
  134. </template>
  135. <template id="task-template">
  136.     <div class="task">
  137.         <div class="task-content">
  138.             <div class="task-area">
  139.                 <div class="checkmark-proj"></div>
  140.                 <div class="task-name">Example task</div>
  141.             </div>
  142.             <div class="task-area">
  143.                 <div class="due-date"> in 0 days</div>
  144.                 <!-- need forum pop up on edit button -->
  145.                 <img src="../src/assests/imgs/pencil-outline.svg" class="edit-task">
  146.                 <img src="../src/assests/imgs/trash-can-outline.svg" class="delete-task">
  147.             </div>
  148.         </div>
  149.     </div>
  150. </template>
  152. </html>

字符串
JS索引文件：

  1. import './css/style.css'
  2. import MainModel from './sections/model/mainModel'
  3. import MainView from './sections/view/mainView'
  4. import MainController from './sections/maincontroller'
  6. const model = new MainModel()
  7. const view = new MainView()
  8. const controller = new MainController(model,view)

型
JS文件的问题：

  1. export default class ProjectView{
  3.     constructor(element, projectModel){
  4.         this.element = element
  5.         this.model = projectModel
  6.         this.id = projectModel.id
  7.         this.name = projectModel.name
  8.     }
  9.     get projectName(){
  10.         return this.element.querySelector('proj-name') 
  11.        
  12.     }
  13.     get id(){
  14.         return this.element.getAttribute('id')
  15.         
  16.     }
  17.     get deleteBttn(){
  18.         return this.element.querySelector('proj-trash-icon')
  19.     }
  20.     get editBttn(){
  21.         return this.element.querySelector('proj-edit-icon')
  22.     }
  23.     set id(value){
  24.         this.element.setAttribute("id", value)
  25.         
  26.     }
  27.     set name(value){
  28.         this.projectName.textContent = value
  29.     }
  31. }

型
在set id（value）上调用setAttribute时发生错误
其中，正在生成ID标签：

  1. import { v4 as uuidv4 } from 'uuid';
  3. export default class Project
  4. {
  5.   constructor(name)
  6.   {
  7.     this.name = name;
  8.     this.id = uuidv4();
  9.     // console.log(this.id); 
  10.   }
  11. }

型
我不知道还有什么文件是必要的
错误信息：“未捕获的类型错误：Cannot read properties of null（阅读'setAttribute'）”我想检索UUID生成的ID，然后将其应用于在单独的JS文件中生成的项目。

  1. import TaskView from './taskView'
  2. import ProjectView from './projectView'
  4. export default class MainView{
  5.     getByID(id){
  6.         return document.getElementById(id)
  7.     }
  8.     toggleAddTaskForumVisibility(visible, id)
  9.     {
  10.         const displayValue = visible ? 'block' : 'none';
  11.         this.getByID(id).style.display = displayValue;
  12.         
  13.     }
  15.     toggleFilterVisiblity(visible, id){
  16.         const displayValue = visible ? 'grid' : 'none';
  17.         this.getByID(id).style.display = displayValue
  18.     }
  20.     getAddProjectForumElementValueByName(elementName){
  21.         return this.getByID('add-proj-forum').elements[elementName].value
  22.     }
  23.     getAddTaskForumElementValueByName(elementName){
  24.         return this.getByID('add-task-forum').elements[elementName].value
  25.     }
  26.     resetAndCloseForumByID(forumID,forumContainerID){
  27.         this.getByID(forumID).reset()
  28.         this.toggleAddTaskForumVisibility(false,forumContainerID)
  29.     }
  30.     appendTaskItem(item){
  31.         let templateContent = this.getByID('task-template').content
  32.         let taskItemElementClone = templateContent.cloneNode(true).querySelector('div')
  33.         let taskItemView = new TaskView(taskItemElementClone, item)
  34.         this.getByID('task-container').append(taskItemView.element)
  36.         return taskItemView
  37.     }
  39.     appendProject(item){
  40.         let templateContent = this.getByID('project-template')
  41.         let projectDivElementClone = templateContent.cloneNode(true).querySelector("div");
  42.         let projectView = new ProjectView(projectDivElementClone, item);
  43.         this.getByID('proj-container').append(projectView.element);
  45.         let option = document.createElement('option')
  46.         option.value = item.element
  47.         option.text = item.element
  48.         option.id = `checkbox-${item.id}`
  49.         this.getByID('task-project').appendChild(option)
  50.         return projectView
  51.     }
  52.     fillAddForumWhenEdit(taskItemView){
  53.         this.getByID('add-task-forum').elements['task-name'].value = taskItemView.model.name
  54.         this.getByID('add-task-forum').elements['task-due-date'].value = taskItemView.model.dueDate
  55.         this.getByID('add-task-forum').elements['task-project'].value = taskItemView.model.project
  57.     }
  58.     updateTaskItem(element){
  59.         let taskItemToUpdate = this.getByID(element.id)
  60.         new TaskView(taskItemToUpdate,element.model)
  61.     }
  62.     updateTaskItemAfterProjectDeleted(element){
  63.         let taskItemToUpdate = this.getByID(element.id)
  64.         new TaskView(taskItemToUpdate,element)
  65.     }
  67. }

型

JavaScript

1条答案

按热度按时间
vktxenjb

vktxenjb1#

在调用setAttribute之前，您可以添加一个检查，以查看this.element是否为null。

  1. if (this.element) {
  2.     this.element.setAttribute("id", value);
  3. } else {
  4.     console.error("Element is null. Cannot set attribute.");
  5. }

字符串

赞(0）分享  回复(0）举报  2023-11-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com