CODEWITHSUNDEEP
javascriptjqueryhtml
Paul McGlinchey
Paul McGlinchey

Reputation: 23

jQuery ID Return is undefined although HTML ID is defined

I'm trying to retrieve the ID of one element, store it as a variable and then use that ID value to interact with other elements in that section with the same ID.

<div class="mainContent">
<div class="articleContent">
     <h1>header1</h1>
     <p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">
</div>
</div>

<div class="mainContent">
<div class="articleContent">
     <h1>header2</h1>
     <p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore()">
</div>
</div>

And then the JS/jQuery

function readMore() {
var subID = event.target.id;

var newTarget = document.getElementById(subID).getElementsByClassName("articlePara");

alert(newTarget.id);
}

At this point I'm only trying to display the ID of the selected element but it is returning undefined and in most cases people seem to notice that jQuery is getting confused because of the differences between DOM variables and jQuery ones.

jsfiddle: https://jsfiddle.net/dr0f2nu3/

To be completely clear, I want to be able to click on one element, retrieve the ID and then select an element in the family of that clicked element using that ID value.

Upvotes: 0

Views: 450

Answers (5)

gm2008
gm2008

Reputation: 4325

  1. You have forgotten to pass in event as parameter in your onclick= call in html.

  2. In your javascript, you need to include event in the parenthesis as well. 

    window.readMore = function(event) {...}

  3. if you write document.getElementById(subID).getElementsByClassName("articlePara"); That's saying you want to get your clicked element's CHILD elements that have class equal to articlePara . There is none. So you get undefined.

    If you want to find all element with a ID one and a class articlePara, it can be done easily with jQuery: 

    newtarget = $("#one.articlePara");

You can insert a line: debugger; in your onclick handler function to trigger the browser's debugging tool and inspect the values of variables. Then you will know whether you are getting what you want.

Upvotes: 0

R Dhaval
R Dhaval

Reputation: 546

 $('.articleFooter').click(function() { 
        var b=subId; //can be any 
        var a="p[id="+b+"]"+"[class='articlePara']";
        $(a).something;
    });

Upvotes: 0

Frenchi In LA
Frenchi In LA

Reputation: 3169

if you're using Jquery:

$(function () {
    $('div.articleFooter').click(function () {
        var para = $(this).prev().find('p.articlePara').text();
        alert('T:' + para);
    });
})

Upvotes: 0

Amodar
Amodar

Reputation: 173

As you have read before, you should keep your id's unique, and you should avoid using onclick in html, but you could do it like this.

With querySelector you get the element and then with parentElement you can retrieve the parent of that element.

function readMore(el) {
  var articleFooterId = el.id;
  var articlePara = document.querySelector(".articleContent #"+articleFooterId);
  var articleContent = articlePara.parentElement;

  console.log('articleFooter', articleFooterId);
  console.log('articlePara', articlePara);
  console.log('articleContent', articleContent);
}

In your html you can return the 'this' object back to the function by doing readMore(this).

<div class="mainContent">
  <div class="articleContent">
       <h1>header1</h1>
       <p class="articlePara" id="one">para1</p>
  </div>
  <div class="articleFooter" id="one" onclick="readMore(this)">footertext</div>
</div>

<div class="mainContent">
  <div class="articleContent">
       <h1>header2</h1>
       <p class="articlePara" id="two">para2</p>
  </div>
  <div class="articleFooter" id="two" onclick="readMore(this)">footertext</div>
</div>

jsfiddle

Upvotes: 0

prasanth
prasanth

Reputation: 22500

just remove the getElementsByClassName("articlePara"); in end of the newTarget .already you are call the element with id alert the element of the id is same with target.id

function readMore() {
  var subID = event.target.id;
  var newTarget = $('[id='+subID+'][class="articlePara"]')
console.log(newTarget.attr('id'));
console.log(newTarget.length);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContent">
  <div class="articleContent">
    <h1>header</h1>
    <p class="articlePara" id="one"></p>
  </div>
  <div class="articleFooter" id="one" onclick="readMore()">click
  </div>
</div>

Upvotes: 2

Related Questions