Question

所以我在这里有这段代码。我将如何删除按钮，以便当您单击html文件时它会自动要求输入？我真的很陌生，所以我了解这里发生的大多数事情，但我有点迷茫。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAN I'M A FAILURE</title>
<div><button id="create-table">Create table</button></div>
<div>
  <table id="table-root"></table>
</div>
<style type="text/css">
th, td {
    padding: 10px;
    text-align: left;
}
</style>
</head>

<body>
    <script>
    var button = document.querySelector('#create-table');
    var tableRoot = document.querySelector('#table-root');

    var movies = ['1', '2', '3', '4', '5'];
    var properties = ['Title', 'studio', 'Revenue'];

button.addEventListener('click', e => {
  tableRoot.innerHTML = '';

    for (let i = 0; i < movies.length; i++ ) {
    var tr = document.createElement('tr');

    for (let j = 0; j < properties.length; j++) {
    var td = document.createElement('td');
    var response = window.prompt(`Please enter the ${properties[j].toLowerCase()} of movie ${movies[i]}`);

      td.innerText = response;
      if (response === null || response === '') td.innerText = `${properties[j]} not supplied`;

      tr.appendChild(td);
    }

    tableRoot.appendChild(tr);
  }
});
    </script>
</body>
</html>

Answer 1

如果我正确阅读了您的问题，则是希望该页面在页面加载时要求用户输入，而不是等待用户单击按钮。您所要做的就是将事件监听器添加到文档的“ DOMContentLoaded”事件中，而不是在按钮上添加“ click”事件（这就是您现在所拥有的）。 This应该会有所帮助。

Answer 2

您只需删除这样的事件侦听器和按钮，然后直接运行在单击时首先触发的代码即可。像这样：

var button = document.querySelector('#create-table');
    var tableRoot = document.querySelector('#table-root');

    var movies = ['1', '2', '3', '4', '5'];
    var properties = ['Title', 'studio', 'Revenue'];


  tableRoot.innerHTML = '';

    for (let i = 0; i < movies.length; i++ ) {
    var tr = document.createElement('tr');

    for (let j = 0; j < properties.length; j++) {
    var td = document.createElement('td');
    var response = window.prompt(`Please enter the ${properties[j].toLowerCase()} of movie ${movies[i]}`);

      td.innerText = response;
      if (response === null || response === '') td.innerText = `${properties[j]} not supplied`;

      tr.appendChild(td);
    }

    tableRoot.appendChild(tr);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div>
  <table id="table-root"></table>
</div>

现在javascript可以直接执行，而不必等待点击事件。

希望这会有所帮助。

删除按钮，然后提示输入？

2 个答案: