Question

我正在尝试使用坐标（目前仅以像素为单位）创建一个表示地图上的点的类，以及一个显示地图上的位置名称和信息的onclick函数，但我一直在“未定义”作为一种价值，我觉得我错过了一些基本的东西，这让我发疯了。这是代码：

function Point (X, Y, N)
{
this.LX = X;
this.LY = Y;
this.name = N;

var pommap = document.getElementById("map");
var divic = document.createElement("div");

divic.style.position = "absolute";
divic.style.border = "2px solid black";
divic.style.height = "20px";
divic.style.width = "20px";
divic.style.top = X + "px";
divic.style.left = Y + "px";

divic.onclick = function()
{
    var disp = document.createElement("div");
    disp.style.position = "absolute";
    disp.style.border = "1px dashed black";
    disp.style.width = "200px";
    disp.style.height = "100px";
    disp.style.left = "1100px";
    disp.style.top = "200px";
    disp.innerHTML = this.name;

    var pmap = document.getElementById("map");
    pmap.appendChild(disp);
}

pommap.appendChild(divic);

}

onclick函数有效，我的DIV被正确绘制和追加，但里面唯一的值是“undefined”字符串而不是我想要的名字。我认为这部分是责备，我不明白为什么：

disp.innerHTML = this.name;

Answer 1

请注意此代码段。 javascript onclick处理程序中的this实际上是刚刚点击的dom元素。不是父对象的实例，处理程序是。

的一部分

<强>问题

＆＃13;

var btn = document.getElementById('foo');
btn.name = 'My Button';

btn.onclick = function() {
  bar.innerHTML = this.name;
}

＆＃13;

<button id="foo">Test</button>

<div id="bar"></div>

＆＃13;

<强>解决方案

缓存this，并在对象中引用它。

＆＃13;

var parent = document.getElementById('bar');

function Obj(name) {
  this.name = name;

  // Cache off internal `self` variable, equal to this instance.
  var self = this;

  function createDomElement_WRONG() {
    var element = document.createElement('div');
    // Note the incorrect usage of `this` here.
    element.innerHTML = this.name;
    parent.appendChild(element);
  }

  function createDomElement_RIGHT() {
    var element = document.createElement('div');
    // Use `self` instead of `this`.
    element.innerHTML = self.name;
    parent.appendChild(element);
  }

  createDomElement_WRONG();
  createDomElement_RIGHT();
}

var foo = new Obj('foo');
var bar = new Obj('bar');

＆＃13;

<div id="bar"></div>

＆＃13;

如何通过javascript

1 个答案: