Как мне передать document.querySelector как переменную?
Чтобы применить принцип DRY, в моем коде много document.querySelector, и я создал функцию как таковую.
const documentQuerySelector = (tag, method, message) => {
document.querySelector(`.${tag}`)`.${method}`= message;
};
Теперь, когда я вызываю функцию как таковую:
documentQuerySelector('message', '.textContent', '⛔️ No Number!');
текстовое содержимое HTML-текста с классом «сообщение» не изменяется на «⛔️ No Number!»
проблема в методе. Когда я передаю «.textContent» в функцию и использую его в селекторе запроса документа как таковом, сообщение document.querySelector(.${tag}).${method}= не распознает .${method}. Причина, по которой я знаю, что это проблема, заключается в том, что когда я использую ту же функцию и вместо этого вставляю «.textContent», она работает нормально. Как передать это свойство как переменную и как использовать его в document.querySelector?
Спасибо
Я попытался передать его как литерал шаблона, и это не сработало.
@ rx2347 похоже, что функция ищет элемент с классом .message, поскольку они добавляют селектор класса . к tag, затем пытаются передать метод textContent, а затем, наконец, устанавливают textContent класса .message в значение переданного аргумента message — одна из причин, по которой он определенно терпит неудачу, заключается в том, что .${method} будет строковым литералом (в приведенном примере) ..textConent.
не знаю как сушит....
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы хотите слишком много DRY здесь за счет гибкости и понятности. Кроме того, имя функции не предполагает каких-либо действий с найденным элементом. Само действие является установщиком свойств. А метод? Если вы посмотрите поближе, вы заметите, что здесь тоже не так много печатаете. Также другие программисты должны научиться обращаться с вашей функцией. Так что мой вердикт - используйте document.querySelector() как есть, это намного чище и императивнее.
document.querySelector('.message').textContent = '⛔️ No Number!';
Если вы хотите сохранить свой набор текста — используйте jQuery, я думаю, что он все еще актуален в 2023 году, и почти все легко поймут ваш код:
$('.message').text('⛔️ No Number!');
Если вы вызываете querySelector для одного и того же элемента несколько раз, вы можете сделать здесь DRY и сохранить элемент в переменной:
const elMessage = document.querySelector('.message');
elMessage.textContent = '⛔️ No Number!';
// some other code
elMessage.classList.toggle('visible', isMessageVisible);
Не уверен, как это сушит, поскольку вы в основном повторяете одно и то же, просто в другом формате, но вам нужно использовать нотацию скобок, чтобы использовать динамическое свойство. Таким образом, ваш код будет выглядеть примерно так:
const documentQuerySelector = (selector, property, value) => {
document.querySelector(selector)[property] = value;
};
documentQuerySelector('.message', 'textContent', '⛔️ No Number!');<div class = "message"></div>
Я думаю, что у этого есть несколько проблем, первая из которых заключается в том, что неясно, чего вы пытаетесь достичь. Вы хотите, чтобы тег <message> с классом «.textContent» содержал «⛔️ No Number!»?