Question

我可以将函数传递给innerHTML吗？我想过将函数名data（）传递给innerHTML。可能吗？？我希望创建一个按钮，该按钮在单击时应显示一个表。

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction">Try it</button>
<p id="demo"></p>

<script>
function myFunction() 
{
document.getElementById("demo").innerHTML = data();

data()
{
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
}
}
</script>

</body>
</html>

Answer 1

尝试这个

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction() 
{
document.getElementById("demo").innerHTML = data();
}

function data()
{
var html = '<table>';
  html += '<tr>';
    html += '<th>Month</th>';
    html += '<th>Savings</th>';
  html += '</tr>';
  html += '<tr>';
    html += '<td>January</td>';
    html += '<td>$100</td>';
  html += '</tr>';
html += '</table>';
return html
}
</script>

</body>
</html>

Answer 2

您需要调用该函数，而不仅仅是评估标识符：

<button onclick="myFunction()">Try it</button>

您用于内容的功能必须包含Javascript，而不是HTML代码。它应该返回一个可以由innerHTML属性使用的字符串：

data()
{
  return '<table>' +
  '  <tr>' +
  '    <th>Month</th>' +
  '    <th>Savings</th>' +
  '  </tr>' +
  '  <tr>' +
  '    <td>January</td>' +
  '    <td>$100</td>' +
  '  </tr>' +
  '</table>';
}

将函数传递给innerHTML

2 个答案: