Question

我正在尝试让这个anchor元素在您单击时更改其文本，但它不起作用。

根据以下结构，有问题的元素是表中一组其他锚点的一部分：

表
- 行
  - cell→anchor
  - cell→anchor
  - cell→anchor
- 行
  - cell→anchor
  - cell→anchor
  - cell→anchor
- 行
  - cell→anchor
  - cell→anchor
  - cell→anchor

它由以下脚本填充：

var initButtonAction = function() {
    var table = document.getElementById("Table");
    var number = document.getElementById("Number");
    var size = parseInt(number.value);

    clearChildren(table); // A function I improvised to clear an element's contents

    for (var i = 0; i < size; i++) {
        var row = document.createElement("tr");
        for (var j = 0; j < size; j++) {
            var cell = document.createElement("td");
            var anchor = document.createElement("a");
            var text = document.createTextNode("O");

            anchor.id = "Id_"+i+"_"+j;
            anchor.addEventListener("click", function(e) {
                    var newValue = document.createTextNode(parseInt(Math.random()*10)+1);

                    clearChildren(anchor); 
                    anchor.appendChild(newValue);

                    e.preventDefault();
                }, false);

            anchor.appendChild(text);
            cell.appendChild(anchor);
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
}

问题在于，当我点击任何锚点时，只会更改最后一个锚点，例如：

O   O   O   O   O
O   O   O   O   O
O   O   O   O   O
O   O   O   O   O
O   O   O   O   O

对此的更改：

O   O   O   O   O
O   O   O   O   O
O   O   O   O   O
O   O   O   O   O
O   O   O   O   8

无论我按什么“O”。

但是，我在另一个项目上做了同样的事情（在事件监听器函数中使用相同的符号）并且它工作得很好，代码如下：

var row = document.createElement('tr');

// Create and initialize other elements

row.id = 'Product'+globalProductsIdCounter+'Row';

// Some more irrelevant processing

opcAnchor.id = 'Product'+globalProductsIdCounter+'OpcAnchor';
opcAnchor.href = '#';
opcAnchor.addEventListener('click', function() {
        ProductsTableBody.removeChild(row);
    }, false
    );
opcAnchor.appendChild(document.createTextNode('(eliminar)'));

为什么第一个例子不起作用？

Answer 1

只需对代码进行一些小改动即可。将anchor.appendChild(newValue);替换为this.appendChild(newValue);。请注意，锚变量将在迭代后保留最后一个元素。

anchor.addEventListener("click", function(e) {
       var newValue = document.createTextNode(parseInt(Math.random()*10)+1);
       clearChildren(anchor); 
       this.appendChild(newValue);
       e.preventDefault();
}, false);

使用javascript将元素更改为自己的内容

1 个答案: