0

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.

Improve this question
10
  • 2
    return number_to_pick doesn’t return anywhere. Familiarize yourself with the DOM API and with events. Inline event handlers like onclick are not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener instead. Commented Jun 2, 2021 at 11:45
  • Here's a fixed fiddle: 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. Commented Jun 2, 2021 at 11:45
  • Here is a simple example to show how you change the textContent of a div element when you click a button. jsbin.com/yolajocoyi/2/edit?html,js,output Commented Jun 2, 2021 at 11:51
  • 1
    Does this answer your question? How do I use this JavaScript variable in HTML? Commented Jun 2, 2021 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 <td> in my table, I must give it unique ID and then use the required functions to modify the value of this particular ID Commented Jun 2, 2021 at 11:58
Related questions
2
Javascript inserting data into HTML table
0
calculate numbers in html table with javascript
5
HTML and JavaScript auto increment number
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.