How can i navigate to below class

Question

I am trying to access the below tag class="topbar"

<div id="swagger-ui">
<section data-reactroot="" class="swagger-ui swagger-container">
<div class="topbar">
<div class="wrapper">
<div class="topbar-wrapper">

I have tried this:

   var x=document.getElementById("swagger-ui");
   var y=x.getElementByClassName("swagger-ui swagger-container");
   var z=y.getElementByClassName("topbar");

Also,

How can I set value in js? I have to set the value for input type text

<div class="wrapper"><label>Value:</label><section class=""><input type="text"></section></div>

There's no `.getElementByClassName()` method. It's `.getElementsByClassName()` (plural). — Andreas, Jul 18 '20 at 12:09
[What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Andreas, Jul 18 '20 at 12:11
Your biggest takeaway here should be that it's time to familiarize yourself with your browser's debugging tools (press F12 in Chrome). The error message on the development console therein would have shown you the problem. — David, Jul 18 '20 at 12:17

score 1 · Accepted Answer · answered Jul 18 '20 at 12:09

1

You can do something like the following:

var topbar = document.getElementsByClassName('topbar');

or

var topbar = document.querySelector('.topbar');

answered Jul 18 '20 at 12:09

Omid Nikrah

2,444
3
15
30

`.querySelector()` and `.getElementsByClassName()` return completely different objects. – Andreas Jul 18 '20 at 12:10
You can get the first element of the result. – Omid Nikrah Jul 18 '20 at 12:11

horrible · Answer 2 · 2020-07-18T12:15:44.400

0

You're code is almost perfect, but you need to spell getElementByClassName correctly, and add an indexer for getElementsByClassName. Try adding [0] after each getElementsByClassName function. Like this: getElementsByClassName[0]

edited Jul 18 '20 at 12:15

answered Jul 18 '20 at 12:11

horrible

117
1
8

thanks, that's super helpful – horrible Jul 18 '20 at 12:16

score 0 · Answer 3 · answered Jul 18 '20 at 12:12

0

try to use querySelector

var x=document.querySelector("#swagger-ui");
var c=document.querySelector(".swagger-ui");
var y=document.querySelector(".swagger-container");

answered Jul 18 '20 at 12:12

Hassan Al Najjar

324
1
4
13

How can i navigate to below class

3 Answers3