Блог

Главная - Вопросы по программированию - Практикуюсь в создании функций и передаче параметров | получении значения null при попытке использовать параметры в селекторах запросов

Практикуюсь в создании функций и передаче параметров | получении значения null при попытке использовать параметры в селекторах запросов

#javascript #function #parameters #queryselector

Вопрос:

Я новичок в Javascript, я практиковался с функциями и параметрами, и я «наткнулся на стену», когда попытался использовать функции для внесения некоторых изменений в DOM, передавая параметры в тех функциях, которые выполняли бы эту работу. в консоли браузера я получаю:

 Uncaught TypeError: document.querySelector(...) is null
classAdder script.js:25
<anonymous> script.js:48

25-я строка-это строка внутри функции classAdder, а 48-я-вызов classAdder.

Заранее спасибо.

 // Function decleration
function createArticle(h1, p) {
  let art = document.createElement("article");
  let data = document.createTextNode("<h1>"   [h1]   "</h1><p>"   [p]   "</p>");
  art.appendChild(data);
  return art;
}

// Arrow Function
const byTagElementAdder = (whereadd, whatadd) => {
  document.getElementsByTagName(CSS.escape(whereadd)).innerHTML = whatadd;
};

// Function expression
const classAdder = function (element, classname) {
  document
    .querySelector(CSS.escape(element))
    .setAttribute("class", CSS.escape(classname));
};

// Arrow function
const styleAdder = (element, style) => {
  document
    .querySelector(CSS.escape(element))
    .setAttribute("style", CSS.escape(style));
};

//
// Using the functions
// Creating new article
const firstArt = createArticle(
  "The H title",
  "The paragraph lorem ipsum bla bla"
);

// adding article in body
byTagElementAdder("body", firstArt);

// adding some style and class
classAdder(firstArt, "art");
styleAdder(firstArt, "width: 100%; margin: 0 auto; padding: 2rem 0 ;");

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

1. Что такое CSS.escape и что оно возвращает?

2. getElementsByTagName() возвращает список узлов, а не один элемент. Присвоение ему innerHTML не имеет никакого эффекта, вам нужно перебрать все элементы или проиндексировать его, [0] чтобы получить первое совпадение.

3. classAdder() и styleAdder() ожидайте, что аргумент будет селектором для элемента. Но вы передаете сам элемент, а не селектор.

4. И byTagElementAdder() ожидает whatadd , что это будет строка HTML, но вы передаете элемент.

5. В общем, вы смешиваете элементы DOM, селекторы CSS и строки HTML.

Ответ №1:

Вот некоторые вещи, которые я изменил, чтобы ваш код работал:

  1. Причина, по которой вы получаете эту ошибку Uncaught TypeError: document.querySelector(...) is null , заключается в том, что вы используете CSS.escape , для чего нужна строка, но вы передаете элемент dom. Так что вы можете просто использовать .setAttribute прямо на элементе.
  2. Ваша byTagElementAdder функция пыталась вставить innerHTML в массив. Я переключил его на ссылку на первый элемент массива и appendChild вместо этого использую функцию
  3. В своей createArticle функции вы используете a createTextNode , но я думаю, что вы хотели бы использовать creatElement для h1 p1 тега и, как вы это сделали для элемента article.

Вот фрагмент кода

 function createArticle(h1, p) {
  let art = document.createElement("article");
    // this creates text as opposed to the h1 and p elements, which is what I think yu want  
  let data = document.createTextNode("<h1>"   [h1]   "</h1><p>"   [p]   "</p>");
  art.appendChild(data);
  return art;
}

// Arrow Function
const byTagElementAdder = (whereadd, whatadd) => {
    // getElementsByTagName returns an array so you want to choose a value within it
  document.getElementsByTagName(CSS.escape(whereadd))[0].appendChild(whatadd)
};

// Function expression
const classAdder = function (element, classname) {
    //once you pass in an element you don't need to use document.querySelector, you already have the document   
  element
    .setAttribute("class", CSS.escape(classname));
};

// Arrow function
const styleAdder = (element, style) => {
  //once you pass in an element you don't need to use document.querySelector, you already have the document 
  element
    .setAttribute("style", CSS.escape(style));
};

//
// Using the functions
// Creating new article
const firstArt = createArticle(
  "The H title",
  "The paragraph lorem ipsum bla bla"
);

// adding article in body
byTagElementAdder("body", firstArt);

// adding some style and class
classAdder(firstArt, "art");
styleAdder(firstArt, "width: 100%; margin: 0 auto; padding: 2rem 0 ;"); 
 <body>

</body>

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

1. Спасибо, эти изменения сработали! Я тоже пытался использовать . querySelector вместо .getElementByTagName, и это сработало идеально. кроме того, я попытался удалить все CSS.escape() из кода, снова сработало отлично.

Метки: