Hello! I have the following code snippet from the home page of my project:
<li class="next" style="display: inline-block; margin: auto">
<a href="/produtos">→</a>
</li>
This hyperlink can call the page in the route / products, which has this code:
<p id="notice"><%= notice %></p>
<h1>Produtos</h1>
<table class="table table-hover custom" id="tabelaProduto">
<thead>
<tr>
<th>id</th>
<th>Nome</th>
<th>Preco</th>
<th>Descricao</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<% @produtos.each do |produto| %>
<tr>
<td><%= produto.id %></td>
<td><%= produto.nome %></td>
<td><%= produto.preco %></td>
<td data-jtable><%= produto.descricao %></td>
<td><%= link_to 'Show', produto %></td>
<td><%= link_to 'Edit', edit_produto_path(produto) %></td>
<td><%= link_to 'Destroy', produto, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<input type="button" id="botaosomar" value="OK"/>
<br>
<%= link_to 'New Produto', new_produto_path %>
and in the javascripts folder, the JS file of this view:
var valores_selecionados = [];
$(document).ready(function(){
$("#tabelaProduto tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:nth-child(3)').html();
var valor = parseFloat(value);
valores_selecionados.push(valor);
console.log(valores_selecionados);
});
$("#botaosomar").click(function(){
var total=0;
for(var i in valores_selecionados){
total += valores_selecionados[i];
}
alert(total);
valores_selecionados = [];
})
});
When I type the route / products directly into the address bar, I can access it and interact with the HTML elements with the JS I built. However, when I click on the home page hyperlink that redirects me to it, JS does not work as if it did not even exist.