Question

javascript 无法读取 null 的属性“style”

2012-08-04

4871

javascript

该函数应该隐藏患者注释并显示下一个注释（如果他们有另一个注释）

function nextNote(idno){
    document.getElementById(idno).style.display = 'none';
    var idno2 = parseInt(idno)+1;
    document.getElementById(idno2.toString()).style.display = 'inline';
    document.getElementById('prevNote').label = parseInt(document.getElementById('prevNote').label) + 1;
    document.getElementById('nextNote').label = parseInt(document.getElementById('nextNote').label) + 1;

未捕获 TypeError：无法在 "document.getElementById(idno).style.display = 'none';

有问题的元素 <li class="notes" label="1052" style="display: inline;" id="1">On: 5/17/2004 一个真正好的患者测试</li>

nextNote 被以下程序调用： <input type="button" id="nextNote" class="notesbottombutton" value=">" label="1" onclick="nextNote(this.label);" />

如果我使用 Chrome javascript控制台 document.getElementById(1).style.display; 我得到： "inline"

注意，在让它工作后，我将向函数添加检查，例如 if(document.getElementById(idno2.toString())，这样如果没有更多注释要显示，它就不会执行任何操作，我只是先尝试获取基本功能

Answer 1

问题可能出在您的点击处理程序上：

nextNote(this.label);

label 不是 HTML 输入的属性。它甚至不是一个有效的属性。要使用 type="button" 设置 input 的标题，您应该使用它的 value 属性并使用 this.value 来访问它。

如果您只是使用此属性将数据附加到元素并想要访问该属性，您应该这样做：

nextNote(this.getAttribute('label'));

但我建议您改用 data- 前缀属性，这是在 HTML 5 中附加数据的标准方式（它也向后兼容）：

<input data-label="foo" />

nextNote(this.getAttribute('data-label'));

Answer 2

this.label 指的是元素上的 label 属性，但您正在设置一个名为 label 的属性。将 onclick 更改为：

onclick="nextNote(this.getAttribute('label'));"