Question

点击3次后，我想将链接文本更改为已完成而不是下一步。我认为这是使用innerHTML，但我无法改变它。

谢谢

     var clicks = 0;
        var a = document.getElementsByClassName('buttonred');
        var link = document.getElementsByTagName('a');
        button.onclick = function(e){

            if(clicks === 0){
                clicks ++;
                loadStudent();
                console.log("1");
            }else if(clicks === 1){
                clicks++;
                loadStudent2();
                console.log("2");
            }else if(clicks === 2){
                clicks ++;
                loadStudent3();

                console.log('3');
            }else{
                console.log(link);
                button.disabled = true;


                link.innerHTML = "done!";
                //button.setAttribute('disabled', 'disabled');
                console.log(button);
            }

Answer 1

getElementsByTagName，如其复数名称所示，返回元素列表。所以你要检索一个与锚标签匹配的元素数组。

要快速修复问题，请将违规行代码更改为：

link[0].innerHTML = "done!"

这应该会在fiddle中产生这种行为。

但是，您无法始终预测所需的锚标记将是该数组中的第一个元素。因此，最好为锚点提供一个ID，然后使用JavaScript的getElementById方法来引用它。

Answer 2

您正在使用document.getElementsByTagName('a')返回节点列表，而nodeList没有innerHTML属性，因为它是包含anchors集合的对象。您需要从节点列表中获取DOM元素，因此在这种情况下，您应该执行link[0].innerHTML = "done!";，这将获取列表中的第一个锚点（在这种情况下恰好是唯一一个，但是您需要使用这基于适当的）。或者，您可以为锚点提供id并使用document.getElementById('nextLinkId').innerHTML= "Done!"

<强> Demo

更改链接元素内的文本

2 个答案: