How to get the text from a p by clicking its div?

Question

I want to click in the div or the img and get the text of the p inside it to go in another list.

 <div onClick="add_basket(this);" class="menu-item burger"> <img  src="img\McDo\bigmac.png"> <p>Big Mac</p> </div>
  <div onClick="add_basket(this);" class="menu-item burger"> <img  src="img\McDo\doubleqp.png"> <p>Double Quarter Pounder</p> </div>


   <ul class="basket" id="basket-mcdo">
    <li>Order</li>
    <li>Mcdo</li>
  </ul>

and i have a lot of others like that and here is my function but it doesn't work it adds "undefined" is the list

function add_basket(that) {
    $(".basket").append("<li>"+that+"</li>");
}

Thank you very much for your help :)

use `var text = $(that).child('p').innerHTML;` inside the `add_basket` function before appending the text - `$(".basket").append("
where is the error? should use `children` instead of `child`? OHH I got it, I need to use `.html()` instead of `innerHTML`, right?? — Rohit Kumar, Aug 28 '15 at 20:08

score 2 · Answer 1 · edited Aug 28 '15 at 20:09

2

You make your request with handler jQuery
JS

$(".menu-item").click(function(){
   $(".basket").append("<li>"+$(this).children("p").text()+"</li>");
});

HTML

 <div class="menu-item burger"> <img  src="img\McDo\bigmac.png"> <p>Big Mac</p> </div>
  <div class="menu-item burger"> <img  src="img\McDo\doubleqp.png"> <p>Double Quarter Pounder</p> </div>

Here you can test it in this jsFiddle

edited Aug 28 '15 at 20:09

melli-182

1,216
3
16
29

answered Aug 28 '15 at 20:02

LTasty

2,008
14
22

1

perfect answer, here is the jsfiddle with very similar approach: https://jsfiddle.net/cwL8rdkx/1 – melli-182 Aug 28 '15 at 20:06
Thank you very much for your help :) – Jeremy Gauthrin Aug 29 '15 at 20:41

score 1 · Answer 2 · edited May 23 '17 at 12:06

You can use the following code to get the text

HTML:

<div class="menu-item burger">  
 <p class="item-name">Big Mac</p> 
</div>
<div class="menu-item burger"> 
 <p class="item-name">Double Quarter Pounder</p> 
</div>

JS:

$(".item-name").click(function add_basket(that) {
    $(".basket").append("<li>"+that.target.innerHTML+"</li>");
});

The reason that your code didn't work is explained here.

Never use .onclick(), or similar attributes from a userscript! (It's also poor practice in a regular web page).

The reason is that userscripts operate in a sandbox ("isolated world"), and onclick operates in the target-page scope and cannot see any functions your script creates.

Always use addEventListener()Doc (or an equivalent library function, like jQuery .on()).

JSFiddle Link

Joseph Evans · Answer 3 · 2015-08-28T22:34:36.993

0

This will target the element it gets passed, in this example you're passing in "this" as "that" we then execute .find on "that" to located an p tag child elements and then .text to return the text contents from the child.

function add_basket(that) {
    $(".basket").append("<li>"+jQuery(that).find('p').text()+"</li>");
}

edited Aug 28 '15 at 22:34

answered Aug 28 '15 at 20:11

Joseph Evans

1,360
9
14

Could you edit your answer to explain why this solves the problem? – Mike Cluck Aug 28 '15 at 22:30

How to get the text from a p by clicking its div?

3 Answers3