Question

好，所以我理解这是一个非常基本的JS逻辑，但我试图用document.write()替换任何.innerHTML，我尝试使用下面的代码

function writeTimesTable(num) {
  for(let i = 1; i < 10; i++ ) {
    let writeString = i + " * " + num + " = ";
    writeString = writeString + (i * num);
    writeString = writeString + "<br />";
    document.write(writeString);
  }
}


function newTable() {
  for(let i = 1; i <= 10; i++ ) {
    let para = document.getElementById("paragraph");
    para.innerHTML = writeTimesTable(i)    

  }
}

我有一个div元素，其ID已经为paragraph。当我查看undefined以及我的div#paragraph标记下的其余代码输出但script元素中的代码输出时，我不断收到div。我究竟做错了什么？

Answer 1

您的函数writeTimesTable()需要返回一个值。您的writeString字符串也需要连接，您可以使用+=执行此操作，如下所示：

function writeTimesTable(num) {
  let writeString = "";
  for(let i = 1; i < 10; i++ ) {
    writeString += i + " * " + num + " = ";
    writeString += writeString + (i * num);
    writeString += writeString + "<br />";
  }
  return writeString
}

可能不会使用para.innerHTML = writeTimesTable(i)，因为它只显示最后一个循环，所以您可能也想在这里使用+=：

para.innerHTML += writeTimesTable(i)

Answer 2

您通常希望避免使用document.write，因为它会直接写入文档。

我还可以自由地在循环期间在页外创建DOM，并在最后将它添加到实际的DOM中。这意味着您在循环时不会不断地重新绘制页面。

这比将innerHTML =更改为innerHTML +=更好，如果您想避免覆盖循环的每个先前迭代，则需要执行此操作。

＆＃13;

function writeTimesTable(num) {
  for(let i = 1; i < 10; i++ ) {
    let writeString = i + " * " + num + " = ";
    writeString = writeString + (i * num);
    writeString = writeString + "<br />";
    return writeString;
  }
}


function newTable() {
  const inner = document.createElement('div');
  for(let i = 1; i <= 10; i++ ) {
    const item = document.createElement('div');
    item.innerHTML = writeTimesTable(i);
    inner.appendChild(item);
  }
  let para = document.getElementById("paragraph");
  para.appendChild(inner);
}

newTable();

＆＃13;

<div id="paragraph"></div>

＆＃13;

Answer 3

你的newTable()函数有10个循环是没用的。你在单个DOM元素上做了10次相同的事情。

不要使用document.write ...

我这样做：

＆＃13;

function newTable( num ) {
  var HTML = "";
  for (var i=1; i <= num; i++) {
    HTML += i +" * "+ num +" = "+ (i*num) +"<br>"; 
  }
  return HTML; // Return the concatenated HTML
}

document.getElementById("paragraph").innerHTML = newTable(10);

＆＃13;

<p id="paragraph">asdasdasd</p>

＆＃13;

或以超级无用的神秘 ES6方式：

＆＃13;

const newTable = n =>
  Array(n).fill().map((_,i) =>
    `${i+=1} * ${n} = ${i*n}<br>`
  ).join('');

document.getElementById("paragraph").innerHTML = newTable(10);

＆＃13;

<p id="paragraph">asdasdasd</p>

＆＃13;

.innerHTML显示为未定义

3 个答案: