Populate table fields based on user input-CodePudding

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>

CodePudding user response：

From your line:

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

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

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>

CodePudding user response：

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