CODEWITHSUNDEEP
javascripthtmlgetelementbyidgetelementsbyclassname
Aditya Vaste
Aditya Vaste

Reputation: 35

getElementById and getElementsByClassName not working

As in mentioned code,I used getElementById and getElementsByClassName but it is not working.

It is giving error as

f[0].getElementById is not a function inside a console.

let f = document.getElementsByClassName('sec');
console.log(f[0].getElementById('p1'));
document.write(f[0].getElementById('p1'))
<div id="maindiv">
  <section class="sec" id="mysec1">
    <p class="para" id="p1">Para1</p>
    <p class="para" id="p2">Para2</p>
    <p class="para" id="p3">Para3</p>
    <p class="para" id="p4">Para4</p>
    <p class="para" id="p5">Para5</p>
  </section>
  <section class="sec" id="mysec2">
    <p class="para" id="pp1">Apara1</p>
    <p class="para" id="pp2">Apara2</p>
    <p class="para" id="pp3">Apara3</p>
    <p class="para" id="pp4">Apara4</p>
    <p class="para" id="pp5">Apara5</p>
  </section>
</div>

Upvotes: 0

Views: 162

Answers (5)

Hammad Ahmed khan
Hammad Ahmed khan

Reputation: 1671

and if u really want to use core js use it like this:

var myDomElement = document.getElementById( "foo" ); // A plain DOM element.
 
$( myDomElement ).find( "a" );

Upvotes: 0

Hammad Ahmed khan
Hammad Ahmed khan

Reputation: 1671

bro why using core js use jquery and make your life simple: var f =$('#mysec1 > #p1'); using jquery

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

getElementById is function of document object.

If you want to get p1 inside class sec you can use querySelector as

document.querySelector('.sec #p1')


div id="maindiv">
    <section class="sec" id="mysec1">
      <p class="para" id="p1">Para1</p>
      <p class="para" id="p2">Para2</p>
      <p class="para" id="p3">Para3</p>
      <p class="para" id="p4">Para4</p>
      <p class="para" id="p5">Para5</p>
    </section>
    <section class="sec" id="mysec2">
      <p class="para" id="pp1">Apara1</p>
      <p class="para" id="pp2">Apara2</p>
      <p class="para" id="pp3">Apara3</p>
      <p class="para" id="pp4">Apara4</p>
      <p class="para" id="pp5">Apara5</p>
    </section>
  </div>
  
  
  <!-- Project -->
  <script type="text/javascript">

let f = document.getElementsByClassName('sec');
console.log(document.querySelector('.sec #p1'));
//document.write(document.querySelector('.sec #p1'))

</script>

Upvotes: 1

Sergey
Sergey

Reputation: 1066

.getElementById is a method of the object document. So you need to change your code a bit:

console.log(document.getElementById('p1'));
document.write(document.getElementById('p1'))

Upvotes: 0

wangdev87
wangdev87

Reputation: 8751

getElementsByClassName response is the array of DOM element.

getElementById is the function of the document, not DOM element.

console.log(document.getElementById('p1'));
document.write(document.getElementById('p1'))

Upvotes: 0

Related Questions