Question

我目前遇到了无法通过 classList.add 方法向 div/form 元素添加类的问题。同样的方法非常适用于输入或按钮等其他元素。然而，div 和表单并没有发生什么神奇的事情。

请忽略 JS 代码在 HTML 中的外部链接。重要的是这两行不起作用：

form.classList.add = "formList";
buttonWrapper.classList.add = "buttonContainer";

(function(){
  function formCreation () {
   //Here I add elements"
    let container = document.createElement('div');
    let form = document.createElement('form');
    let input = document.createElement('input');
    let buttonWrapper= document.createElement('div');
    let buttonCreator = document.createElement('button');
    let buttonRemover = document.createElement('button');

    input.placeholder = 'Enter your new task';
    buttonRemover.textContent = 'Delete'
    buttonCreator.textContent = 'Add';

    //Here I'm trying to add classess//
    form.classList.add = "form";
    //It won't work for the form'
    buttonWrapper.classList.add = "buttonContainer";
    //Neither it would work for the buttonWraper div"
    input.classList.add('input');
    buttonCreator.classList.add('creator');
    buttonRemover.classList.add('remover')


    container.append(form);
    buttonWrapper.append(buttonCreator);
    buttonWrapper.append(buttonRemover);
    form.append(input);
    form.append(buttonWrapper);
    
    return {
      form,
      input,
      buttonCreator,
    };
  }

 
  document.addEventListener('DOMContentLoaded', function () {
    let containerApp = document.getElementById('container');

    let heading = createAppTitle('Things to be done');
    let todoItem = formCreation();
    let listItself = todoListCreator();

    containerApp.append(heading);
    containerApp.append(todoItem.form);
    containerApp.append(listItself);

  });

}());

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div id="container" class="container"></div>
  <script src="index.js"></script>
</body>
</html>

Answer 1

我不明白这段代码如何处理任何元素类型。

格式：

form.classList.add = "formList";
buttonWrapper.classList.add = "buttonContainer";

错了。

试试

form.classList.add("formList");
buttonWrapper.classList.add("buttonContainer");

有关使用 classList 及其属性的信息，请参阅 MDN。

“classList.add”不会将类添加到 div 和表单元素

1 个答案: