I can’t get the value of the column next to my input

Asked

Viewed 64 times

1

I have a problem I don’t know why... I have a table in which one of the columns gets the input and when onkeyup in this input, I need to get the innerHTML from the column next: printscreen

    <script type="text/javascript">
  $('#pedido').on('keyup', '.qte', function () {
    var x = $(this).closest('#custo').innerHTML;
       console.log(x)
  });
  </script>

He is not finding the #cost, back to Undefined message.

I wonder what I’m doing wrong?

javascript jquery

  • If #custo is an id, so it’s unique on the page, so don’t just do $("#custo")?

  • Anderson, he’s not the only one. He may have more than one line. It’s an order table.

  • So your HTML structure is wrong. Why it is considered wrong/bad to repeat an HTML ID?

  • You’re correct, I should use the class then. But it still doesn’t work...

  • Then edit the question and add a [mcve] that reproduces the problem

  • Thank you so much for your time... If you couldn’t understand my problem, it’s not you who will help me.

  • Jeferson, I recommend you do the [tour], read the [Ask] guide and go to [help] for more information about the operation of the site. This will help you greatly in future interactions. It’s not a question of understanding the problem, it’s clear, there’s just no way to replicate it to suggest the solution. See that even in the answer in Virgilio Novic right at the end he says exactly that. The only thing in this situation is to show a way to do it, at the risk of not being valid for you and even if it works you will not understand why yours didn’t work. I see no advantage to anyone in this.

Show 2 more comments

2 answers

0


I believe your doubt is simple and I’ve made a minimal example:

function changeValue(e, value, obj) {
  document.getElementById(e).textContent = (value * obj.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<tr>
 <td>1700,00</td>
 <td>
  <input type="number" onKeyUp="changeValue('s1', 1700, this)" />
 </td>
 <td><span id="s1">0</span></td>
</tr>
<tr>
 <td>2.000,00</td>
 <td>
  <input type="number" onKeyUp="changeValue('s2', 2000, this)" />
 </td>
 <td><span id="s2">0</span></td>
</tr>
</table>
</div>

I have no way to reflect your example, missed your created table so I can understand how you did yours, that’s a north, a path that can be followed with the appropriate changes (prototype).

  • 1

    Thank you very much, that’s right! Thanks!

0

Jefferson, an id cannot be repeated. Change the id #custo by a class="custo". And the .closest() will not fetch a "side" element, it looks for a closer parent element. And do not use .innerHTML with jQuery objects, use .text(), which will return the element text. Additionally, use .trim() to remove the spaces that HTML generates by indenting text within the cell.

Would look like this:

var x = $(this).closest('tr').find(".custo").text().trim();

The .closest("tr") will fetch the input line and fetch the cell with the class .custo and return the text contained in it.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.