How to put javascript variables into an HTML table from a separate Javascript file?

Question

So I am trying to get used to Electron. I have an HTML table set up, and in a separate js file I have variables that are taken from a form for the user. I need to figure out how to put these variables into the html table.

here is 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>

here is html file for the form:

<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>

and here is javascript file:

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");

All help is appreciated!

I am omitting some pieces of the files to save space

Answer 1

You can do the following:

HTML CODE

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

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

How to put javascript variables into an HTML table from a separate Javascript file?

Question

1 answers

solution1
0 2019-02-19 05:08:38

How to put javascript variables into an HTML table from a separate Javascript file?

Question

1 answers

solution1 0 2019-02-19 05:08:38

solution1
0 2019-02-19 05:08:38