Get HTML div element by its attribute and value using query selector API [duplicate]

Question

I have below div in my HTML.

<div row-index="0" /div>
<div row-index="1" /div>

I have to select specific div from above using its attribute. I am trying to do below in my typescript code. I get this index 0, 1 from another object.

const value = event.rowIndex;  -->line 1
const elem = document.querySelector('[row-index= value]'); -->line 2

The 'value' in line 2 upon hovering in my webstorm IDE says cannot find declaration to go to. I want it to use value from line1. Do I have to escape it using some backslash or quotations or something?

FYI, row-index is not a valid attribute on a div element. If you're using it arbitrarily you should covert it to a data attribute, as data-row-index. — isherwood
– isherwood, Commented Mar 16, 2023 at 18:35
@isherwood I do not think what you said is correct. I am using an ag-grid library and it generates the divs for rows in such manner. — Teja duggirala
– Teja duggirala, Commented Mar 16, 2023 at 18:40
It's not valid just because someone else does it. :) See developer.mozilla.org/en-US/docs/Web/HTML/Element/…. — isherwood
– isherwood, Commented Mar 16, 2023 at 18:41

isherwood · Accepted Answer · 2023-03-16 18:40:02Z

2

You can't just drop a variable into a selector like that. You'll need to use concatenation or a template literal.

querySelector('[row-index="' + value + '"]')

answered Mar 16, 2023 at 18:40

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get HTML div element by its attribute and value using query selector API [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related