Returning number from javascript and inserting it to a html table

Question

I am very new to web development and just learning. I have created a websocket server and now I am working on the actual GUI. The webserver must display a table of data that will dynamically change based on the user input.

What I am struggling with right now is how can I call the javascript function inside a html table?

In the final web, the javascript function will perform HTML request and return a number. This number must be then update a certain row and column in the table.

I have made a simplified example using JSFIddle:

https://jsfiddle.net/a42q1zt0/1/

HTML

<html>


  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 5px;
      text-align: left;
    }

  </style>
  </head>


  <div>
    <input type="button" onClick="insertData()" value="Add">
  </div>


  <div class="custom-select" style="width:200px;">
    <select>
      <option value="0">Select operation:</option>
      <option value="1">operation1</option>
      <option value="2">operation2</option>
    </select>
  </div>

  <br>



  <table id="t1">
    <caption>Operation table</caption>
    <thead>
      <tr>
        <th>Operation code</th>
        <th>To Do</th>
        <th>Done</th>
        <th>Left</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>operation1</td>
        <td>1000</td>
        <td>
          <script>
            get_number_to_pick();
          </script>
        </td>
        <td>13</td>
      </tr>
      <tr>
        <td>operation2</td>
        <td>555</td>
        <td>
          <script>
            get_number_to_pick();
          </script>
        </td>
        <td>15</td>
      </tr>
    </tbody>
  </table>

</html>

Javascript:

function get_number_to_pick() {
  var number_to_pick = 50;
  return number_to_pick;
}

This seems like a simple task but I have not managed to find a working example of something simmilar on the internet. I hope to get some clarification here. Thanks in advance.

`return number_to_pick` doesn’t return anywhere. Familiarize yourself with the [DOM API](//developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/en-US/docs/Web/Guide/Events). Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Jun 02 '21 at 11:45
Here's a fixed fiddle: https://jsfiddle.net/enmvrcj7/ (edit: forgot to remove the table scripts) Please add the missing function and show us what you've tried so far. You also don't put scripts inside tables; you can reference specific table cells from a script regardless of where it is included in your HTML. — , Jun 02 '21 at 11:45
Here is a simple example to show how you change the textContent of a div element when you click a button. https://jsbin.com/yolajocoyi/2/edit?html,js,output — ikhvjs, Jun 02 '21 at 11:51
Does this answer your question? [How do I use this JavaScript variable in HTML?](https://stackoverflow.com/questions/30035932/how-do-i-use-this-javascript-variable-in-html) — Heretic Monkey, Jun 02 '21 at 11:54
Thank you all for good reading material and examples. So If I understand correctly, from the examples that I have seen so far, most if not all modify the certain elements of html by using their 'id'. So in my example, in order to modify a specific in my table, I must give it unique ID and then use the required functions to modify the value of this particular ID — Lukas Petrikas, Jun 02 '21 at 11:58
@Sebastian Simon Can you clarify what is other method to modify certain html objects without using ID? Both ikhvjs and Heretic Monkey examples use ID to access the html objects. — Lukas Petrikas, Jun 02 '21 at 12:07
@LukasPetrikas The link I shared includes all DOM traversal methods. Whether IDs are appropriate, depends on how many table cells you need to fill, how they are generated, etc. If it’s just these fixed two, IDs may be fine. Classes can be used instead. — Sebastian Simon, Jun 02 '21 at 12:14
Thank you. I need to do some reading now and I will come up with a solution afterwards. I will share my solution once I have it. — Lukas Petrikas, Jun 02 '21 at 12:21
I have been reading and experimenting with some information that you have provided. Mostly with eventlisteners. I have came up with a solution to my issue: https://jsfiddle.net/dxfqj4ys/ — Lukas Petrikas, Jun 03 '21 at 05:48

Returning number from javascript and inserting it to a html table

0 Answers0