Question

所以我试图适应电子学。我设置了一个HTML表，并且在一个单独的js文件中，有一些变量是从用户的表单中获取的。我需要弄清楚如何将这些变量放入html表中。

这是html：

<script src="./index.js"></script>
<script type="text/javascript" src="add.js"></script>

<font size="3" face="Courier New">
<table style="width:100%">
  <tr>
    <th>Name of Item</th>
    <th>Size</th>
    <th>Purchase Amount</th>
    <th>Sold Amount</th>
    <th>Platform Sold</th>
    <th>Total Fees</th>
    <th>Total Profit</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

这是表单的html文件：

<body>
<div class="container">
  <div class="columns">
    <div class="column col-10">
      <h1 class="text-center">New Sale</h1>

      <form id="todoForm">
        <div class="form-group">
          <label class="form-label" for="add-input">Name of Item</label>
          <input class="form-input" type="text" name="add-input" placeholder="Jordan 1..." id="itemName">
          <label class="form-label" for="add-input">Size</label>
          <input class="form-input" type="text" name="add-input" placeholder="Large..." id="size">
          <label class="form-label" for="add-input">purchase Amount</label>
          <input class="form-input" type="text" name="add-input" placeholder="$160..." id="pAmount">
          <label class="form-label" for="add-input">price Sold</label>
          <input class="form-input" type="text" name="add-input" placeholder="$400..." id="sAmount">
          <label class="form-label" for="add-input">platform Sold</label>
          <input class="form-input" type="text" name="add-input" placeholder="StockX..." id="platform">
        </div>

        <button class="btn">Add Sale</button>
      </form>

    </div>
  </div>
</div>

 <script src="./add.js"></script>
  </body>

</html>

这是JavaScript文件：

const { ipcRenderer } = require('electron')

var itemName = document.getElementById("itemName");
var size = document.getElementById("size");
var pAmount = document.getElementById("pAmount");
var sAmount = document.getElementById("sAmount");
var platform = document.getElementById("platform");

感谢所有帮助！

我省略了一些文件以节省空间

Answer 1

您可以执行以下操作：

HTML代码

  <tr>
    <td id = "name"></td>
    <td id = "size-cell"></td>
    ...
  </tr>

document.getElementById('name').innerHTML = itemName.value;
document.getElementById('size-cell').innerHTML = size.value;

如何将JavaScript变量从单独的Javscript文件放到HTML表中？

1 个答案: