How to get the value of attribute instead of an [Object object] ? (JavaScript)

Question

I always get [Object object] or are creating a conflict no matter how hard I try. (I tried a couple of other variants.) ;(

var $ = function(selector){

  var x; 
  var obj = {
  
    myLib(selector){
      return x || document.querySelectorAll(selector);
    },
    
    cl(selector){
      x = [x[0].closest(selector)];
      return this;
    },    
      
    attr(s,v){
      s&&v ? x.forEach(y=>{y.setAttribute(s,v);})
           : x = [x[0].getAttribute(s)]; x.value; // what is wrong here ?
      return this;
    },
      
  };
        
  x = obj.myLib(selector);
  return obj;
  
};

var wtf = $('.kilo').cl('.uniform').attr('data-wrestler');

console.log('WTF: '+wtf);
console.log('WTF: '+JSON.stringify(wtf));

<div id="foxtrott">
  foxtrott
  <div class="uniform" data-wrestler="hulkster">
    uniform
    <div class="charlie">
      charlie
      <div class="kilo">
        kilo
      </div>
    </div>
  </div>
</div>

If you also have useful links to read about this topic this would be very nice.

Thanks in advance, guys !!!

Why do you have x.value; ? It is a separate statement, so you'd better write it on a separate line. — www.admiraalit.nl
– www.admiraalit.nl, Commented Oct 30, 2019 at 10:53

Greedo · Accepted Answer · 2019-10-30 11:26:20Z

2

You should return x instead of this in the attr method

var $ = function(selector){

  var x; 
  var obj = {
  
    myLib(selector){
      return x || document.querySelectorAll(selector);
    },
    
    cl(selector){
      x = [x[0].closest(selector)];
      return this;
    },    
      
    attr(s,v){
      s&&v ? x.forEach(y=>{y.setAttribute(s,v);})
           : x = [x[0].getAttribute(s)]; 
      return x;
    },
      
  };
        
  x = obj.myLib(selector);
  return obj;
  
};

var wtf = $('.kilo').cl('.uniform').attr('data-wrestler');

console.log('WTF: '+wtf);
console.log('WTF: '+JSON.stringify(wtf));

<div id="foxtrott">
  foxtrott
  <div class="uniform" data-wrestler="hulkster">
    uniform
    <div class="charlie">
      charlie
      <div class="kilo">
        kilo
      </div>
    </div>
  </div>
</div>

answered Oct 30, 2019 at 11:26

Greedo

3,5481 gold badge15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kaiido Over a year ago

Then you'd loose the chaining at attr setting. Make it return the string only when it is getting it, returning this otherwise.

Collectives™ on Stack Overflow

How to get the value of attribute instead of an [Object object] ? (JavaScript)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related