Question

document.getElementById('r'+a.toString()).innerHTML+="<td><tr>"+a+"</tr>X<tr>"+n+"</tr>=<tr>"+a*n+"</tr></td>";

我无法使用getElementById().innerHTML和<table><td r+a></td></table>创建表格。上面的代码不起作用。

Answer 1

使用控制台日志查看您的元素是否甚至存在并被找到。如果代码不起作用，那么很可能 1）找不到元素 2）您的元素ID字符串不是您想的那样。

let elementId = 'r'+a.toString();
console.log('element id is:', elementId);//<- what is the elementId
let element = document.getElementById(elementId);
console.log('element is:', element);// <- did you find the element
element.innerHTML+="your html here";
//was there an error in console.

我不知道要达到的目标，但是可以像这样制作一个简单的乘法表。

//  HTML
<section>
  <p>Multiplication table</p>
  <button onclick="createTable()">Create Table</button>
  <input type="number" value="3" id="size" placeholder="number of rows">
  <table id="multiplication-table"></table>
</section>
// CSS
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: white;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}
table td {
  border: 1px solid white;
  padding: 0.2em;
  margin: 1em;
}
// JavaScript
window.createTableRow = function(rowNr, size) {
  let row = '<tr>';
  for (i = 1; i <= size; i++) {
    row += '<td>' + (rowNr * i) + '</td>';
  }
  return row + '</tr>';
}
window.createTable = function() {
  let size = parseInt(document.getElementById("size").value);
    let table = document.getElementById("multiplication-table");
  table.innerHTML = '<tbody></tbody>';
  let i;
  for (i = 1; i <= size; i++) {
    let row = createTableRow(i, size);
    table.innerHTML += row;
  }
}

工作示例： https://jsfiddle.net/rainerpl/xpvt214o/500777/

为什么document.getElementById不起作用？

1 个答案: