Using JavaScript how can I get the string inside of this HTML element by ID?

Question

Using JavaScript, how can I get the string inside of this HTML element, with the id being recItemString_GPLA\|input? Inside the element there is a string with "qty" (without quotes) that I'm trying to capture. When I inspect the element I get:

<input data-oj-internal="" type="text" readonly="" placeholder="" class="oj-inputtext-input oj- 
component-initnode" id="recItemString_GPLA|input"> == $0.

Above that element in DevTools there is:

<oj-input-text :id="[[fieldId()]]" validators="[[validators]]" on-value- 
changed="[[valueChanged.bind($data)]]" on-valid-changed="[[validChanged]]" 
value="{{value}}" required="[[required]]" readonly="[[readOnly]]" messages- 
custom="[[messagesComputed]]" display-options="[[displayOptions]]" help=" 
[[help]]" id="recItemString_GPLA" class="oj-inputtext oj-form-control oj- 
component oj-read-only oj-complete"><input data-oj-internal="" type="text" 
readonly="" placeholder="" class="oj-inputtext-input oj-component-initnode" 
id="recItemString_GPLA|input"></oj-input-text>

I have not been able to gather the string inside the element to display it to the console.

Using the pluggin SelectorGadget the element XPath is: //*[(@id = "recItemString_GPLA\|input")]

When I try and query oj-input-text directly to the console the console returns [Object NodeList]

Here is a screenshot of the inspected element:

<input> elements don't have string inside of them (text content), you're probably looking to get a text node that is after this <input>, try: document.querySelector('#recItemString_GPLA\\|input').nextSibling.textContent — Titus
– Titus, Commented Nov 5, 2019 at 18:03
Titus, I tried console.log("The next try is: " + document.querySelector('#recItemString_GPLA\\|input').nextSibling.textContent); and the console response I get is: Uncaught TypeError: Cannot read property 'textContent' of null at pullCellValue (<anonymous>:45:102) — jeppy7
– jeppy7, Commented Nov 5, 2019 at 18:07
@AdamH I tried console.log("The value of the input is: " + document.getElementById('recItemString_GPLA|input').value); and the console response I get is: The value of the input is: — jeppy7
– jeppy7, Commented Nov 5, 2019 at 18:11
I guess there is no Node after the <input/>, you should edit your question to add more context (more of the HTML) and specify exactly what you're trying to retrieve. — Titus
– Titus, Commented Nov 5, 2019 at 18:29

Gil De Geyndt · Accepted Answer · 2019-11-05 18:12:13Z

1

With jQuery you can escape special characters like this:

$('#recItemsString\\_GPLA\\|input');

answered Nov 5, 2019 at 18:12

Gil De Geyndt

463 bronze badges

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

1 Comment

jeppy7 Over a year ago

Can you elaborate on how this would help me?

Carsten Massmann · Accepted Answer · 2019-11-05 20:09:53Z

1

I am really not sure which text is supposed to be produced. In the following snippet I added an input value to be displayed.

const qs=s=>document.querySelector(s);

console.log(qs('#recItemString\\_GPLA\\|input').value)

<oj-input-text :id="[[fieldId()]]" 
  validators="[[validators]]" 
  on-value-changed="[[valueChanged.bind($data)]]"
  on-valid-changed="[[validChanged]]" 
  value="{{value}}" 
  required="[[required]]"
  readonly="[[readOnly]]"
  messages-custom="[[messagesComputed]]"
  display-options="[[displayOptions]]"
  help="[[help]]" 
  id="recItemString_GPLA" 
  class="oj-inputtext oj-form-control oj-component oj-read-only oj-complete">

 <input data-oj-internal="" 
  type="text" value="some text inside ..."
  readonly=""
  placeholder=""
  class="oj-inputtext-input oj-component-initnode" 
  id="recItemString_GPLA|input">
  
</oj-input-text>

answered Nov 5, 2019 at 20:09

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

2 Comments

jeppy7 Over a year ago

I've added a screenshot to show the string of the element that I inspected.

jeppy7 Over a year ago

Also, keep in mind that -> value="some text inside ..." does not show when I inspect the element.

Collectives™ on Stack Overflow

Using JavaScript how can I get the string inside of this HTML element by ID?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related