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>

marc_s · Accepted Answer · 2021-10-15 04:27:30Z

1

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>

edited Oct 15, 2021 at 4:27

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 28, 2021 at 14:52

0stone0

45.5k6 gold badges54 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rainbow12 Over a year ago

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?

Eugene Reim · Accepted Answer · 2021-09-28 14:58:30Z

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, 2021 at 14:58

Eugene Reim

263 bronze badges

1 Comment

Community Over a year ago

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.

Collectives™ on Stack Overflow

Populate table fields based on user input

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related