What is the best method to retrieve the nested value in this JavaScript/HTML code?

Can anyone help me extract the value "Yes, I am a Speaker" from this code using Javascript DOM element with getElementById? The challenge is that the value is nested inside a list element without any specific attributes. Each block of code has a unique list id, making it tricky to access the desired information. Any quick assistance would be greatly appreciated as I need this for creating a GTM custom JavaScript variable.

<li id="u5mH6ZV1aX21" class="container step2" style="width: 232px;">
  <input type="hidden" name="value" value="Yes, I am a smoker" autocomplete="off">
  <div class="letter"><span>A</span></div>
  <span class="label">Yes, I am a smoker</span>
  <span class="tick"></span>
  <div class="aux">
    <div class="bg"></div>
    <div class="bd"></div>
  </div>
</li>
javascriptjquerytypescript

Answer №1

Start by choosing the element based on its class or type

var element1 = document.querySelector("#u7RQ9YV8bW16 input").value
var element2 = document.querySelector("#u7RQ9YV8bW16 .label").textContent
console.log(element1, element2);
<ul>
  <li id="u7RQ9YV8bW16" class="content step3" style="width: 215px;">
    <input type="hidden" name="data" value="No, I am not a smoker" autocomplete="off">
    <div class="letter"><span>B</span></div>
    <span class="label">No, I am not a smoker</span>
    <span class="check"></span>
    <div class="extras ">
      <div class="background"></div>
      <div class="border"></div>
    </div>
  </li>
</ul>

Answer №2

If you want to target a specific element, the querySelector API is your best bet. By using the unique ID and type (or "tagName") of the child element you need to access, you can easily reach it.

Check out this MDN article on querySelector for more information

document.querySelector("#u5mH6ZV1aX21 input").value

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discover the ultimate solution to disable JSHint error in the amazing Webstorm

I am encountering an error with my test files. The error message states: I see an expression instead of an assignment or function call. This error is being generated by the Chai library asserts. Is there a way to disable this warning in Webstorm? It high ...

javascriptwebstorm

The URL routing in Vue-router seems to be incorrect as it directs to the wrong page. To fix this issue, make sure to include a '#' before the

Welcome to my website! Check out my home page here: https://i.sstatic.net/znfq0.jpg If you're interested in reading my blog, visit the blog page here: https://i.sstatic.net/oiYSY.png I've built this site using vue3. Here's a snippet of th ...

javascriptvue.jsvue-routervuejs3vue-router4

Using memoization for React Typescript callback passed as a prop

My component is designed to display data retrieved from a callback provided in the props. To prevent an infinite loop caused by mistakenly passing anonymous functions, I am looking for a method to enforce the usage of memoized callbacks. const DataRenderer ...

reactjstypescript

Is anyone able to assist with resolving the problem of `tsc` constantly monitoring `node_modules`?

Using the Expo platform has been a great experience for me. Here is a snippet from my tsconfig.json: { "compilerOptions": { "paths": { "@/*": [ "./src/*" ], ...

typescriptreact-nativeexpotscreact-native-gifted-charts

No response observed upon clicking on the li element within the personalized context menu

I created a custom context menu that pops up when you click on an li element within an unordered list. I'm trying to trigger an alert when clicking on an li item inside the context menu, but it's not working as expected. To handle this dynamic c ...

javascriptjquerycsstampermonkey

Implementing image change on dropdown selection using jQuery click event

I'm new to Jquery and JavaScript. I have a dropdown in my Keen template that displays 2 flags. I want to be able to click on the dropdown and select the corresponding flag. Most of the examples I found online use the select and options tags, but my co ...

javascriptjqueryhtml

Dependency on the selection of items in the Bootstrap dropdown menu

I am currently struggling with a few tasks regarding Bootstrap Dropdown Selection and despite looking for information, I couldn't find anything helpful. Check out my dropdown menu Here are the functions I would like to implement: 1) I want the subm ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Express API will only provide the initial key-value pair of an object in the response

I'm working on fetching nested data objects. Although I can successfully retrieve the object data in the console, I encounter an issue when attempting to access this data using return res.json(imageObject). Instead of retrieving all key-value pairs of ...

javascriptexpress

Determine the originating component in React by identifying the caller

Can you explain how to access the calling component in a React application? function MyCallingComponent() { return <MyReadingComponent/> } function MyReadingComponent() { console.log(callingComponent.state) } ...

javascriptreactjs

Error encountered when utilizing cursor in Prisma

I am currently utilizing Prisma version 4.2.1 within a Next.js API Route to implement cursor-based pagination for posts. Upon passing the cursor to the API endpoint, I encounter an error message (500) in the console: TypeError: Cannot read properties of u ...

typescriptnext.jsbackendapi-designprisma

A collection of functions embedded within a JSON data structure

I am working with a website that provides data in a JSON-like format similar to the following: { "name":"tom jones", "no": 123, "storedproc": function(){ callbuyer(0123); } } Currently, I am using $. ...

javascriptajaxjsonfunction

Is ngForIn a valid directive in Angular 4?

While attempting to loop over the properties of an object using *ngFor with in, I encountered a challenge. Here is a sample code snippet: @Controller({ selector: 'sample-controller', template: ` <ul> <li *ngFor="let i in o ...

angulartypescriptngfor

Dynamically loading Jquery tabs in AngularJS can enhance user experience and

I need to implement a feature that loads tabs from an array using AngularJS. $scope.hods = [ { leader_id: 1000321, staff_id: 1000321, longname: "Ooi Kok Hong", username: "ANDREW", team_role: "HOD", importance: "1", active:true }, { leader_id: 100 ...

jqueryangularjs

Utilizing JavaScript to analyze and interact with a website using Selenium's ghost drivers

Currently, I am attempting to scrape the second page of Google search results using Ghost driver. To achieve this, I am utilizing JavaScript to navigate through the HTML source of the search results page and click on the page numbers at the bottom with G ...

javajavascriptselenium-webdriverphantomjsghostdriver

How can you retrieve the id of a div element using an if/else statement in React Js?

In my React Js project, I am attempting to create a responsive connecting line between 3 divs. While successfully adding a line between the elements, I encountered an issue when using Axios to fetch data and display it with an if/else statement. The error ...

jqueryreactjsif-statementaxios

Learn how to extract an ID created with AngularJS using JavaScript

I have a piece of code that generates multiple divs using ng-repeat and assigns each one an id based on a specific value. <div ng-repeat="item in $scope.items"> <div id="ajs-{{item.title}}">{{text}}</div> <script> v ...

javascripthtmlangularjs

Automated updating feature with jQuery

Is there a way to use jQuery code to automatically refresh a page after navigating back in the browser history? Here is an example of what I have tried: jQuery(".form_" + form_count).html("<div id='message'></div>") jQuery('#me ...

javascriptjquery

Executing an event when a selection is made in a JQuery AutoComplete feature

My current task involves using the AutoComplete feature to select from an option list. This list consists of numeric id's for the values and corresponding names. The AutoComplete/combox is functioning perfectly, but I am facing a challenge in capturi ...

jqueryjquery-autocomplete

Determining the size of an image prior to uploading it in a React

The solution for this issue can be found using vanilla JavaScript here To clarify, instead of using alert(), my goal is to store the dimensions in the state object. How can I adapt this code into a React component utilizing the OnChange() event handler? ...

javascriptreactjsinput

Utilizing D3.js v4 to showcase a JSON file on a map

I am attempting to create a map similar to the one created by Mike Bostock. You can access my JSON file (here), which represents Europe divided into NUTS 2 regions. The structure of the JSON file is as follows: { "type": "Topology", "objects": ...

javascriptjsoncsvd3.jschoropleth