getElemntbyid returns undefined value

var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion

Read this:

Document.getElementById()

Then bookmark the website in your web browser.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Have you tried "jQuery"?

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML

It is free. Give it a try.

But if you prefer to stick with traditional JavaScript, then follow what InsiteFX said.

Have you tried "jQuery"?

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML

It is free. Give it a try.

But if you prefer to stick with traditional JavaScript, then follow what InsiteFX said.

I tried but first row only affected.
echo '<td><input type="number" id="primaryincome" class="form-control" placeholder="0"> </td>';
<script type="text/javascript">
$("#primaryincome").click(function () {
    var primaryincome = $("#primaryincome").val();
   // var otherincome = $("#otherincome").val();
    var totalincome = parseInt(primaryincome) + parseInt(primaryincome);
    alert(totalincome);
    $("#totalamountremaining").val(totalincome);
})
</script>

var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion

Display 'texttwo_'+rowid result and check if this element exists. Using of jQuery and other libs will not help if the element with this ID is not exists.

Just call console.log('texttwo_'+rowid) before call document.getElementById to check what element you try to get.

If document.getElementById returns null, then that element is not exists or hasn't created yet if it is a dynamical element.

var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion

Display 'texttwo_'+rowid result and check if this element exists. Using of jQuery and other libs will not help if the element with this ID is not exists.

Just call console.log('texttwo_'+rowid) before call document.getElementById to check what element you try to get.

If document.getElementById returns null, then that element is not exists or hasn't created yet if it is a dynamical element.

It returns texttwo_1 or texttwo_2
**********************
Yes it's a dynamical element
it's a input type 
echo '<td id="texttwo_'.$row['id'].'"> 
  <input type="number" min="0" max="999" name="acr"  
  onChange="sum('.$row['id'].');" class="txtbox"  ></td>';
It is a muliple  row. each row has different value that should be calculated based on this second row

Using of jQuery and other libs will not help if the element with this ID is not exists.

Using jQuery, you can check whether the element exist.

Code:

if($('#texttwo_'+rowid).length)
{
    // Do code
}

I always do that check when I'm using DataTables or some other JS plugins. I first check if that table exists, then if yes, I initialize DT to that table. It always works for me.

Edit:
By the way, the code above will only return 0 or 1 (true or false equivalents) so no need to do if($('#texttwo_'+rowid).length > 0)
Correct me if I'm wrong.

I tried but first row only affected.
echo '<td><input type="number" id="primaryincome" class="form-control" placeholder="0"> </td>';
<script type="text/javascript">
$("#primaryincome").click(function () {
    var primaryincome = $("#primaryincome").val();
   // var otherincome = $("#otherincome").val();
    var totalincome = parseInt(primaryincome) + parseInt(primaryincome);
    alert(totalincome);
    $("#totalamountremaining").val(totalincome);
})
</script>

Once you clicked the #primaryincome textbox (I assume it's a textbox because of the [type="number"]), it executes the code immediately. And since no default value was entered (but I'm suspecting that you mean [value="0"] instead of [placeholder="0"]), it will give you an invalid result.

I think your target is to when a user changes the value in your textbox, the code will be executed.
If that's what you want, you need to use $('#primaryincome').change() instead of $().click()

var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion

Display 'texttwo_'+rowid result and check if this element exists. Using of jQuery and other libs will not help if the element with this ID is not exists.

Just call console.log('texttwo_'+rowid) before call document.getElementById to check what element you try to get.

If document.getElementById returns null, then that element is not exists or hasn't created yet if it is a dynamical element.

It returns  texttwo_1 or texttwo_2
**********************
Yes it's a dynamical element
it's a input type 
echo '<td id="texttwo_'.$row['id'].'"> 
  <input type="number" min="0" max="999" name="acr"  
  onChange="sum('.$row['id'].');" class="txtbox"  ></td>';
It is a muliple  row. each row has different value that should be calculated based on this second row

If they're dynamical and create on document load then run you code in:

Code:

document.addEventListener("DOMContentLoaded", () => {
    // TODO: your code here
});

or if you use jQuery in:

Code:

$(document).ready(() => {
    // TODO: your code here
});

What's the point in getting elements by id if the id's are dynamic?
Instead, use a css class as the selector. Then, use the $(this).parents('tr') method to get the row in the table.

Example:

PHP Code:

<table>
  <?php foreach($rows as $row) : ?>
      <tr>
        <td><input type="text" name="text_one[]" class="findrow" /></td>
        <td><span class="showme"><?= $row['id'];?></span></td>
     </tr>
  <?php endforeach; ?>
</table> 


Code:

<script>
$(document).ready(function(){
  $('.findrow').change(function(){
     row = $(this).parents('tr');
     t2 = row.find('.showme').html();
     alert(t2);
  });
});
</script>

After you change the value in one of the input fields, the id of the current row will be displayed in an alert box.