Question

关于onclick事件的一些错误

以下是我的代码的一部分：

var srcElement = null;
        var valueElement = null;
        showTree = function (item, valueId) {
            srcElement = window.event.srcElement;
            valueElement = document.getElementById(valueId);
            var x = getLeft(item);
            var y = getTop(item) + item.offsetHeight;
            var w = item.offsetWidth;
            blockDTree(x, y, w);
        }
        getTop = function (e) {
            var offset = e.offsetTop;
            if (e.offsetParent != null) offset += getTop(e.offsetParent);
            return offset;
        }
        getLeft = function (e) {
            var offset = e.offsetLeft;
            if (e.offsetParent != null) offset += getLeft(e.offsetParent);
            return offset;
        }

        blockDTree = function (x, y, w) {

            var item = $("#combdtree");
            item.style.display = 'block';
            item.style.top = y;
            item.style.left = x;
        }

<input type="text" name="" class="FormStyle2" onClick='showTree(this,"pid")' readonly="readonly" placeholder="父节点"/>	 					
<div id="combdtree" class="dtreecob" ></div>
<div class="dtree" style="overflow: auto; width: 100%;">
</div>

但是，当我运行它时，我遇到了：

Home:725 Uncaught TypeError: Cannot set property 'display' of undefined

at blockDTree (Home:725)
at showTree (Home:709)
at HTMLInputElement.onclick (Home:63)

代码出了什么问题？让我困惑了两天。如何解决？

Answer 1

您已将jQuery对象分配给项目

blockDTree = function(x, y, w) {
        var item = $("#combdtree");      // this is a jQuery object
        item.style.display = 'block';    // this does not work because jQuery do not have variable or method called style
}

因此jQuery试图查找未定义的名为style的方法或变量，将您的代码更改为使用Javascript

您的代码将变为

 blockDTree = function(x, y, w) {
        var item = document.getElementById("combdtree");
        item.style.display = 'block';
        item.style.top = y;
        item.style.left = x;
 }

Answer 2

item是jQuery对象，不是元素

解决方案1：使用元素

blockDTree = function(x, y, w) {
    var item = $("#combdtree")[0];    // now item is the first such element and since ID's are unique, there's no issue assuming there's only one

    item.style.display = 'block';
    item.style.top = y;
    item.style.left = x;
}

解决方案2：使用jQuery

blockDTree = function(x, y, w) {
    var item = $("#combdtree");
    item.css({display:'block', top:x, left:x});
}

Answer 3

解决方案：


您没有使用jquery，因此请勿使用$("#combdtree");

应用var item = document.getElementById("combdtree");

请检查以下代码：

var srcElement = null;
var valueElement = null;
showTree = function (item, valueId) {
    srcElement = window.event.srcElement;
    valueElement = document.getElementById(valueId);
    var x = getLeft(item);
    var y = getTop(item) + item.offsetHeight;
    var w = item.offsetWidth;
    blockDTree(x, y, w);
}
getTop = function (e) {
    var offset = e.offsetTop;
    if (e.offsetParent != null) offset += getTop(e.offsetParent);
    return offset;
}
getLeft = function (e) {
    var offset = e.offsetLeft;
    if (e.offsetParent != null) offset += getLeft(e.offsetParent);
    return offset;
}

blockDTree = function (x, y, w) {
    var item = document.getElementById("combdtree");
    if (item != null) {
        item.style.display = 'block';
        item.style.top = y;
        item.style.left = x;
    }
}

 <input type="text" class="FormStyle2" onClick='showTree(this,"pid")' readonly="readonly" placeholder="父节点" />
<div id="combdtree" class="dtreecob"></div>
<div class="dtree" style="overflow:auto;width:100%;"></div>

无法设置未定义js的属性“显示”

3 个答案: