Не удается получить элемент по маске "атрибут = значение" через querySelector

Question

Имеется конструкция вида:

<div id='lawdocument'>
    <div blockOrder = '1'></div>
    <div blockOrder = '2'></div>
</div>

Мне необходимо получить элемент div, который удовлетворяет требованиям [blockOrder = '2']. Я написал следующее выражение и оно работает нормально:

takerDIV = lawDocument.querySelector('div[blockOrder = "2"]');

Но если я хочу вместо значения "2" подставить переменную blockValue=2 то получить элемент никак не удается:

takerDIV = lawDocument.querySelector('div[blockOrder = blockValue]');
console.log(takerDIV); // null

takerDIV = lawDocument.querySelector('div[blockOrder = "blockValue"]');
console.log(takerDIV); // null

takerDIV = lawDocument.querySelector('div[blockOrder = (blockValue)]');
console.log(takerDIV); //  Uncaught DOMException: Failed to execute 'querySelector' on 'Element': 'div[blockOrder = (blockValue)]' is not a valid selector.

Помогите пожалуйста.

humster_spb · Accepted Answer · 2018-12-09T11:16:08.833

0

Потому что Вы неправильно подставляете переменную в строку - её надо конкатенировать:

const blockValue = 2;
const takerDIV = document.querySelector('div[blockOrder="'+blockValue+'"]');
console.log(takerDIV)

<div id='lawdocument'>
    <div blockOrder='1'></div>
    <div blockOrder='2'></div>
</div>

edited Dec 09 '18 at 11:16

answered Dec 09 '18 at 10:46

humster_spb

13,511
4
24
49

Про само понятие я знаю, но откуда такой синтаксис? "'+blockValue+'"? Двойные кавычки и оборачивание плюсами, где посмотреть информацию? – Igor Cheglakov Dec 09 '18 at 10:56
Я знаю что ('string ' + variable) дает 'string value', но у вас переменная blockValue обернута в плюсы с обеих сторон и дополнительную пару кавычек, я такого в основах не помню, может быть пропустил. – Igor Cheglakov Dec 09 '18 at 11:05
@IgorCheglakov, ну Вам же переменную надо встроить ВНУТРЬ строки: поэтому Вы строку как бы разрываете на 2 части и складываете: первую часть + переменную + вторую часть – humster_spb Dec 09 '18 at 11:05
@IgorCheglakov, а насчёт двойных кавычек - ну у Вас же вот здесь тоже двойные кавычки вокруг двойки: querySelector('div[blockOrder = "2"]') Соответственно, и вокруг переменной они нужны. Такой синтаксис – humster_spb Dec 09 '18 at 11:08
Я понял. В данной стоке двойные кавычки это "текстовые" кавычки читаемые буквально в выражении blockOrder="2", а одинарные это "логические", которые размечают контаминацию, спасибо за помощь! – Igor Cheglakov Dec 09 '18 at 11:18
@IgorCheglakov, именно! Рад, что разобрались :) Если мой ответ оказался полезен, примите его, поставив галочку. – humster_spb Dec 09 '18 at 11:20

score 0 · Answer 2 · answered Dec 09 '18 at 11:59

В коде переменная неправильно вставлена в выражение, есть два варианта, как исправить эту ошибку 1.

const blockValue = 2;
const takerDIV = document.querySelector('div[blockOrder="'+blockValue+'"]');

При помощи EcmaScript

takerDiv = lawDocument.querySelector('div[blockOrder=${blockValue}]');

Не удается получить элемент по маске "атрибут = значение" через querySelector

2 Answers2