Populate table fields based on user input

Question

I have to make an app, that takes a user input field, and then populates a table, according to some calculations. However, I don't understant how can I do this calculations to appear as a result in the field of the table. Can someone help me please? Here is my code;

function countbase() {
  let count = 0;

  var input = document.getElementById('sequence').value;


  const inputLen = input.length;
  document.getElementById('bcount').value = GC_Content;
}

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

<h2>Calculater example</h2>

<label for="sequence">  Name field</label>
<br>
<br>
<textarea id="sequence" name="sequence" placeholder="Enter sequence" rows="2" cols="50">
    </textarea>
<br><br>
<button onclick="countbase();">Check </button>
<br><br>

<table style="width:100%" id="values">
  <tr>
    <th colspan="2">&nbsp;Results</th>
  </tr>
  <tr>
    <td align="center"><span><b>Lenght Count:</b></span></td>
    <td align="center"><span id="bcount"></span></td>

  </tr>
  <tr>
    <td align="center"><span><b>Word Count  :</b></span></td>
    <td><b><span id="GC"></span></b></td>
  </tr>
</table>

score 1 · Accepted Answer · edited Oct 15 '21 at 04:27

From your line:

document.getElementById('bcount').value = GC_Content;

Here GC_Content isn't defined, I guess you trying to set the inputLen variable.

That said, to change the content of a <span>, use innerHTML:
Change span text?

To get the 'word count', we can use split(' ') to create an array of the input string, then set the .length of that array as the content of the <span>

function countbase(){

  // Get input element
  const input = document.getElementById('sequence').value;
 
  // Set length
  document.getElementById('bcount').innerHTML = input.length;
  
  // Set word count
  document.getElementById('GC').innerHTML = input.split(' ').length;
}

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

<h2>Calculater example</h2>
    
<label for="sequence">  Name field</label>
<br>
<br>
<textarea id="sequence" name="sequence" placeholder= "Enter sequence" rows="2" cols="50">
</textarea>
<br><br>
<button onclick="countbase();">Check </button>  
<br><br>

<table style="width:100%" id="values">
    <tr>
        <th colspan="2">&nbsp;Results</th>
    </tr>
    <tr >
        <td align="center"><span><b>Lenght Count:</b></span></td>
        <td align="center"><span id="bcount"></span></td>
        
    </tr>
    <tr>
        <td align="center"><span><b>Word Count  :</b></span></td>
        <td><b><span id="GC"></span></b></td>
    </tr>
  </table>

Thank you for the help,this works, but what if I want to add more functions, meaning that I want another function that counts vowels? should I add it to the function already created, or can I create another function apart from that? — Sofia, Sep 28 '21 at 15:02
You can add that to the existing function. However, thats out of scope of your current question. That said, if somebody [answers your question](https://stackoverflow.com/help/someone-answers), please consider [upvoting](https://meta.stackexchange.com/questions/173399/how-can-i-upvote-answers-and-comments) or [accepting](https://meta.stackexchange.com/q/5234/179419) the answer. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself.| — 0stone0, Sep 28 '21 at 15:04

score 0 · Answer 2 · answered Sep 28 '21 at 14:58

0

You can use Array.split() method and then get length of result array let GC_Content = input.split(" ").length //splits input by spaces and count length of result array

answered Sep 28 '21 at 14:58

Eugene Reim

26
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 28 '21 at 15:50

Populate table fields based on user input

2 Answers2