Question

我已经构建了一个简单的练习游戏，其中5个值分别存储。我想把这5个值/ div放到一个对象中，但我对输出感到困惑。 console.log返回：＆＃34; cardValue的值是[object HTMLDivElement]＆＃34;。第一部分是工作，但我对后者感到困惑。当我输入我的控制台player.cardValue时，我得到的玩家没有定义＆＃39;。任何帮助表示赞赏。感谢。

  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]);
  }

Answer 1

您似乎对控制台的行为感到困惑。它依赖于实现，并且在每个具有一个浏览器的浏览器中具有完全不同的行为，因此您需要了解您正在使用的一个（s）的特性。

运行代码并在IE中将player.cardValue输入控制台返回：

player.cardValue
null

在Chrome中，它会返回：

null

我不希望因为我没有任何ID为 cardValue 的元素。请注意，如果页面中确实有合适的元素，那么它们必须在代码之前，否则当代码运行时，元素还不存在。或者您可以在onload事件之后运行代码（例如，使用window.onload = function(){...}）

如果您希望获取元素的文本内容，请使用其 textContent 属性。较旧的IE支持 innerText ，所以你可以这样做：

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

如果要在元素中获取标记，请使用 innerHTML 属性，该属性已被所有浏览器长时间支持：

var theMarkup = element.innerHTML;

要查看可靠的输出，请编写自己的输出例程，并且不要依赖控制台对您可能需要的内容的解释，至少在您熟悉它们的工作方式之前。

Answer 2

我认为控制台日志有很多很酷的功能，比如error / debug / warn / info / assert，你也可以分析和跟踪。 console.log具有非常酷的功能，并且与浏览器相关，如评论中所述。

如果DOM中有一个带有id cardValue的元素，你将在player.cardValue中获得代表它的Html对象，你实际上将获得DOM元素的值或文本，具体取决于它的元素类型。

例如，从元素中获取文本可能有时是元素的innerText，在其他情况下，输入文本的.value属性等等。

访问这些值取决于您尝试从中获取信息的元素的每种情况。不仅如此，实际上还取决于您定义的DOCTYPE，因此最好有一种类型的库以正确的方式访问我们期望的DOM所需的值。

我还将添加一本我读过的书的参考，这解释了使用jtrery的attr访问实际上会处理浏览器的不兼容性。

javascript使用getElementById创建具有属性的对象

2 个答案: