CODEWITHSUNDEEP
javascriptobjectgetelementbyid
KM617
KM617

Reputation: 135

javascript create object with attributes using getElementById

I've built a simple practice game with 5 values stored separately. I want to put these 5 values/divs into a single object, but I'm confused about the output. the console.log returns: "the value for cardValue is [object HTMLDivElement]". The first part is working, but I'm confused about the latter. When I type into my console player.cardValue I get 'player is not defined'. Any help is appreciated. Thanks.

  var cardValue = document.getElementById('cardValue');
  var cardValue2 = document.getElementById('cardValue2');
  var playerHit1Div = document.getElementById('playerHit1Div');
  var playerHit2Div = document.getElementById('playerHit2Div');
  var playerHit3Div = document.getElementById('playerHit3Div');


    var player = {
    cardValue: document.getElementById('cardValue'),
    cardValue2: document.getElementById('cardValue2'),
    playerHit1Div: document.getElementById('playerHit1Div'),
    playerHit2Div: document.getElementById('playerHit2Div'),
    playerHit3Div: document.getElementById('playerHit3Div')
  };

  for (var x in player){
    console.log('the value for ' + x + ' is ' + player[x]);
  }

Upvotes: 0

Views: 839

Answers (2)

juan garcia
juan garcia

Reputation: 1516

I think that console log has many cool features like error / debug / warn / info / assert, you can also profile and also trace. console.log has very cool features and is browser dependent as it was spoken in the comments.

If there is an element in DOM with id cardValue you will get in player.cardValue the Html Object that represents it, you will actually get the value or text of the DOM element depending on the kind of element it is.

For instance getting the text from an element could be some times innerText of the element and in other cases .value attribute of an input text and so on.

Accessing to those values depends on each case of the element you are trying to get info from. And not only that but actually also depends on the DOCTYPE you define, so it is good to have some kind of library to get access in the correct way to the values we need from DOM in the way we expect.

I will also add a reference a book I read, that explains that accessing with attr of jquery actually handles browser incompatibilities.

enter image description here

Upvotes: 0

RobG
RobG

Reputation: 147363

You seem to be confused about the behaviour of the console. It's implementation dependent and has quite different behaviour in each browser that has one, so you need to learn the peculiarities of the one(s) you are using.

Running your code and entering player.cardValue into the console in IE returns:

player.cardValue
null

In Chrome it returns:

null

Which is expected as I don't have any element with an ID of cardValue. Note that if you do have suitable elements in the page, they must be before the code, otherwise when the code runs, the elements don't exist yet. Or you can run the code after the onload event (e.g. use window.onload = function(){...})

If you wish to get the text content of an element, then use its textContent property. Older IE supports innerText instead, so you can do:

var theText = element.textContent || element.innerText;

If you want to get the markup inside the element, use its innerHTML property, which has been supported by all browsers for a long time:

var theMarkup = element.innerHTML;

To see reliable output, write your own output routines and don't rely on the console's interpretation of what you might want, at least until you are familiar with how they work.

Upvotes: 1

Related Questions