3

I am trying to access color and size in the following: enter image description here

This is the DOM

enter image description here

And here is my code. It only outputs color and size, without the values. Please help.

t.desc= e.querySelector(".n_ck_s_itemoption_list").textContent.replace(/\'/g, '');
console.log("Values",t.desc);

EXPECTED OUTPUT IS BLACK AND LARGE...Only getting the titles: color, size. Thanks.

6
  • 1
    so, what expected output?
    – Grundy
    Commented Feb 15, 2016 at 7:40
  • Although it's a nice idea to ss tagview, it would be so much nicer if you put the real code of that
    – Batu.Khan
    Commented Feb 15, 2016 at 7:40
  • 1
    It is correct, you are selecting the textContent of your main div, but it hasn't any text Commented Feb 15, 2016 at 7:40
  • Expected output is Black and Large, bt I'm only getting color and size. @PieroAlberto What I'm I supposed to do? Commented Feb 15, 2016 at 7:49
  • go deeper in the dom, you have to go in the children of your main div (another div) and againin its children, looping over the ul and again looping here to find the li :) Commented Feb 15, 2016 at 7:50

3 Answers 3

2

Edited after you gave me the url

navigate to your url: http://www.forever21.com/Checkout/Basket.aspx?br=f21

and put this in the console

var productDetails = function() {
  var itemTitle = document.querySelector(".s_itemname > h1").textContent

  var item = document.querySelectorAll("div.n_ck_s_itemoption_list")[1]

  var color = item.querySelector("div > ul:nth-child(1) > li:nth-child(2)").textContent

  var size = item.querySelector("div > ul:nth-child(2) > li:nth-child(2)").textContent

  return {
    itemTitle: itemTitle,
    color: color,
    size: size
  }
}

then test it...

nice hips

To learn Javascript well, study the pages on MDN and write some real programs, like a game.

3
  • post the link to the web page
    – zelcon
    Commented Feb 15, 2016 at 8:43
  • Thank you! Worked like a charm! Commented Feb 17, 2016 at 8:37
  • Hey @zelcon5 , I have a problem capturing data of more than 1 item...could you help? Each time I have two or more items in the cart, it only fetches data for 1...help. Thanks Commented Feb 17, 2016 at 8:51
1

If you want the values try this:

var nodes = document.querySelectorAll(".n_ck_s_itemoption_list > div  > ul li:last-child");
var text = '';
for(var item in nodes) {
  if (nodes.hasOwnProperty(item)) {
    console.log(nodes[item].innerHTML);
    text += nodes[item].innerHTML + ', ';
  }
};

alert(text);
<div class="n_ck_s_itemoption_list">
  <div>
    <ul>
      <li>color</li>
      <li>BLACK</li>
    </ul>
    <ul>
      <li>size</li>
      <li>Large</li>
    </ul>
  </div>
</div>

EDIT: This just got confused because the website you posted in @zelcon5 comment have two div elements with the same class... only one of them is set with display: none, anyway use this:

var nodes = document.querySelectorAll(".n_ck_s_itemoption_list > div  > ul li:last-child");
var text = '';
for(var item in nodes) {
  if (nodes.hasOwnProperty(item) && nodes[item].parentElement.parentElement.parentElement.style.display !== "none") {
    alert(nodes[item].innerHTML);
    text += nodes[item].innerHTML + ', ';
  }
};

alert(text);
6
  • Thanks @byoigres ... Works but it comes along with html text...how can you exclude that and just have Black and Large? Commented Feb 15, 2016 at 9:01
  • I don't understand, if you run the snipped you get an alert box with the text BLACK, Large, , what do you need exactly? Commented Feb 15, 2016 at 9:04
  • I need Black and Large texts only. What I get is text from the inner html as well... how do I replace that and just extract the Black and Large? They appear as the last texts in the alert. This is what I get: Commented Feb 15, 2016 at 9:13
  • This is what I get: .........there's more html text then ends like this <ul id="ulLineItemSize_21c68461-45e4-4e8e-9e26-6213c281c4b3"> </ul> </dd> </dl> , BLUE/WHITE, Large, Commented Feb 15, 2016 at 9:20
  • It's ok, I have sorted it out :) Thanks a lot! Commented Feb 15, 2016 at 9:30
0

Try this code

var uls=document.querySelector(".n_ck_s_itemoption_list").getElementsByTagName('ul');
uls[0].getElementsByTagName('li')[0].textContent //retun "color"
uls[0].getElementsByTagName('li')[1].textContent //retun "Black"
uls[1].getElementsByTagName('li')[0].textContent //retun "Size"
uls[1].getElementsByTagName('li')[1].textContent //retun "Large"
2
  • brings back undefined :( Commented Feb 15, 2016 at 9:04
  • please make sure div element with class name "n_ck_s_itemoption_list" is exists when above code being execute. Commented Feb 15, 2016 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.