Javascript 如何从Rails视图获取ElementById

我有一个带有以下HTML的Rails视图：

<tbody>
  <% @requests.each do |request| %>
     <tr data-request-id="<%= request.id %>">
       <td id="artist" style="text-align: center"><%= request.artist %></td>
       <td style="text-align: center"><%= request.title %></td>
       <td style="text-align: center" class="voteCount"><%= request.voteCount %></td>
       <td style="text-align: center"><%= button_to 'Vote', request_upvote_path(request.id), remote: true, method: :post, onclick: 'upVote()', class: 'upVote' %></td>
     </tr>
   <% end %>
</tbody>

---

试试这样的。您可以使用rails传递onclick id，只需在JavaScript中使用常规的

getElementById

：

<tbody>
  <% @requests.each do |request| %>
 <tr data-request-id="<%= request.id %>">
   <td id="artist" style="text-align: center"><%= request.artist %></td>
   <td style="text-align: center"><%= request.title %></td>
   <td style="text-align: center" id="voteCount<%= request.id %>"><%= request.voteCount %></td>
   <td style="text-align: center"><%= button_to 'Vote', request_upvote_path(request.id), remote: true, method: :post, onclick: "upVote(#{request.id})", class: 'upVote', id:"voteButton#{request.id}" %></td>
 </tr>
   <% end %>


function upVote(id) {
   var count = document.getElementById("voteCount" + id).innerHTML;
   count = parseInt(count);
   count = count + 1;
   count = count.toString();
   document.getElementById("voteCount" + id).innerHTML = count;
   document.getElementById("voteButton" + id).disabled = true;
}

功能上表决（id）{
var count=document.getElementById（“voteCount”+id）.innerHTML；
count=parseInt（count）；
计数=计数+1；
count=count.toString（）；
getElementById（“voteCount”+id）.innerHTML=count；
document.getElementById（“voteButton”+id）.disabled=true；
}

试试这样的方法。您可以使用rails传递onclick id，只需在JavaScript中使用常规的

getElementById

：

<tbody>
  <% @requests.each do |request| %>
 <tr data-request-id="<%= request.id %>">
   <td id="artist" style="text-align: center"><%= request.artist %></td>
   <td style="text-align: center"><%= request.title %></td>
   <td style="text-align: center" id="voteCount<%= request.id %>"><%= request.voteCount %></td>
   <td style="text-align: center"><%= button_to 'Vote', request_upvote_path(request.id), remote: true, method: :post, onclick: "upVote(#{request.id})", class: 'upVote', id:"voteButton#{request.id}" %></td>
 </tr>
   <% end %>


function upVote(id) {
   var count = document.getElementById("voteCount" + id).innerHTML;
   count = parseInt(count);
   count = count + 1;
   count = count.toString();
   document.getElementById("voteCount" + id).innerHTML = count;
   document.getElementById("voteButton" + id).disabled = true;
}

功能上表决（id）{
var count=document.getElementById（“voteCount”+id）.innerHTML；
count=parseInt（count）；
计数=计数+1；
count=count.toString（）；
getElementById（“voteCount”+id）.innerHTML=count；
document.getElementById（“voteButton”+id）.disabled=true；
}

你的意思是JS需要将结果发送到服务器，以便在页面刷新时保持不变吗？最初我只希望它更新html，但最终我也希望它保存到数据库中。我试着一步一个脚印地去做，但是如果我能先做到这一点，我完全同意。我明白了，那么JS部分是否有效呢？如果没有，你的问题是什么？JS目前不工作。问题是，我有一个按钮可以在页面上增加一个值，但我不知道如何获取正确按钮的ID。因此，当前代码将始终递增数组中的第一个索引，但我需要它根据相应的索引递增。换句话说，如果我单击页面第三项上的投票按钮，它会增加第一项。我需要它来增加第三个。我当前的

GetElementsByCassName

代码不起作用，因为它不是动态的。你是说JS需要将结果发送到服务器，以便在页面刷新时保持不变吗？最初我只希望它更新html，但最终我希望它也保存到数据库中。我试着一步一个脚印地去做，但是如果我能先做到这一点，我完全同意。我明白了，那么JS部分是否有效呢？如果没有，你的问题是什么？JS目前不工作。问题是，我有一个按钮可以在页面上增加一个值，但我不知道如何获取正确按钮的ID。因此，当前代码将始终递增数组中的第一个索引，但我需要它根据相应的索引递增。换句话说，如果我单击页面第三项上的投票按钮，它会增加第一项。我需要它来增加第三个。我当前的

getElementsByCassName

代码不起作用，因为它不是动态的。这似乎是个好主意，但当我试图将

作为参数传递给JS方法时，我得到一个语法错误

index.html.erb:25:语法错误，意外'，期望结束@输出\u buffer.safe\u append='）\'，类：\'upvote\'%>…^确定，这可以增加投票数，这太棒了。另一个问题是，点击后禁用按钮，但它看起来不起作用。我将单元格编辑为：
您正在向disabled传递字符串。它应该是一个布尔值。删除引号，它应该会工作。它实际上是按照我的方式工作的，使用字符串，只是因为同样的问题而不是正确的元素。我将其更新为一个布尔值
document.getElementById（“voteButton”+id）.disabled=true
但这不起作用这似乎是个好主意，但当我试图将
作为参数传递给JS方法时，我得到了一个语法错误
index.html.erb:25:syntax error，unexpected'），期望结束@输出\u buffer.safe\u append='）\'，类：\'upvote\'%>…^确定，这可以增加投票数，这太棒了。另一个问题是，点击后禁用按钮，但它看起来不起作用。我将单元格编辑为：
您正在向disabled传递字符串。它应该是一个布尔值。删除引号，它应该会工作。它实际上是按照我的方式工作的，使用字符串，只是因为同样的问题而不是正确的元素。我将其更新为一个布尔值
document.getElementById（“voteButton”+id）.disabled=true但那不起作用