Question

我创建了一个最小的例子：https://jsfiddle.net/n2r5t91v/

var myvalue = 20 // abbreviating how I calculate myvalue
var cell = document.getElementById("mytd");
cell.setAttribute('onclick', 'addToCell(' + myvalue + ');');

function addToCell(value) {
  var td_cell = document.getElementById("mytd");
  td_cell.value = td_cell.value + ' ' + value;
}

<table>
  <tr>
    <td id="mytd">
      test
    </td>
  </tr>
</table>

我希望点击时<td>单元格的值从“test”更改为“test 20”。为什么它不能这样工作？

Answer 1

它不起作用的原因是jsfiddle被设置为运行onload所以代码实际上看起来像

window.addEventListener("load", function () {
  var myvalue = 20 // abbreviating how I calculate myvalue
  var cell = document.getElementById("mytd");
  cell.setAttribute('onclick', 'addToCell(' + myvalue + ');');

  function addToCell (value) {
    var td_cell = document.getElementById("mytd");
    td_cell.value = td_cell.value + ' ' + value;
  }
})

现在，由于您以错误的方式添加事件（使用属性），因此该函数在全局范围内执行。因此，单击处理程序无法看到onload方法中定义的函数。

因此，您需要将JavaScript设置为在主体底部运行（jsFiddle设置），您需要使函数全局化，或者最佳解决方案，使用addEventListener以正确的方式绑定事件。

输入没有值，它们有HTML和文本。所以它需要是innerHTML。

  var myvalue = 20 // abbreviating how I calculate myvalue
  var cell = document.getElementById("mytd");
  cell.addEventListener('click', function () { addToCell(myvalue); });

  function addToCell(value){
    var td_cell = document.getElementById("mytd");
    td_cell.innerHTML = td_cell.innerHTML + ' ' + value;
  }

Answer 2

你只需要这样做。 value没有<td>属性。使用innerHTML：

＆＃13;

var myvalue = 20;
var cell = document.getElementById("mytd");
cell.setAttribute('onclick', 'addToCell(' + myvalue + ');');

function addToCell(value) {
  var td_cell = document.getElementById("mytd");
  td_cell.innerHTML = td_cell.innerHTML + ' ' + value;
}

＆＃13;

<table>
  <tr>
    <td id="mytd">
      test
    </td>
  </tr>
</table>

＆＃13;

您也可以在此部分采用不同的方式：

td_cell.innerHTML += ' ' + value;

Answer 3

尝试使用此

var myvalue = 20 // abbreviating how I calculate myvalue
var cell = document.getElementById("mytd");
//cell.setAttribute('onclick', 'addToCell(' + myvalue + ');');
cell.addEventListener('click', function() {
    addToCell(myvalue);
    });
function addToCell(value){
var td_cell = document.getElementById("mytd");
td_cell.innerHTML = td_cell.innerHTML + ' ' + value;
}

JS：将onclick函数添加到表格单元格

3 个答案: