ERBファイルの中のonClickで親要素をidを渡そうとしてハマった話

ソクシル（https://lp.sokusiru.com）という投票制の検索エンジンを作っているmaztakです。現在、検索結果でBlockボタンを押すと、そのサイトの要素を（次回から検索結果から除外したうえで）その場でも非表示にする、というのを作ってます。onClickでの値の渡し方で少しハマったのでメモります。

下記のようにonClick="toggleDisplay(<%= result['id'] %>)"という風に引数を渡してやる（result['id']はこのBlockボタンを持っている親要素のidにもなってます）と、関数には親要素自身が渡りました。

<input type="submit" value="Block" class="text-danger p-0" onClick="toggleDisplay(<%= result['id'] %>)" style="border:none;background-color:transparent;">

全体のコード

search.html.erb

<ul class="site-list-group">
  <% @results.each do |result| %>
    <li class="site-list" id=<%= result['id'] %>>
	<%= form_tag("/blocked_sites/create") do %>
	  <input type="hidden" name="url" value="<%= result['url'] %>">
	  <input type="submit" value="Block" onClick="toggleDisplay(<%= result['id'] %>)">
	<% end %>
    </li>
  <% end %>
</ul>
		  

<script>
function toggleDisplay(ele) {
  console.log(ele);
  ele.style.display = 'none';
}
</script>

例えば

例えばループの最初としてresult['id']がWebPages0"であったとき、出力されるHTMLはざっくり書くと以下の構造です。

<li id="WebPages1">
	<form>
		<input onclick="toggleDisplay(WebPages0)">
	</form>
</li>

一見、引数はString型の"WebPages0"を渡してくれるのかなと思っていたのですが、これはidがWebPages0である<li>要素が渡ります。

> console.log(ele)
  <li id="WebPages1">

もし以下のようにシングルクォーテーションで囲ってやると、ちゃんとStringのWebPages0を引数として渡してくれます。

<li id="WebPages1">
	<form>
		<input onclick="toggleDisplay('WebPages0')">
	</form>
</li>

つまり、引数としてIDを渡してあげたいのならERBのコードはこう書くべきなんですね。<%= result['id'] %>をさらにシングルクォーテーションで囲んであげる。

<input type="submit" value="Block" onClick="toggleDisplay('<%= result['id'] %>')" >

ただ今回はdisplay要素をトグルしたい<li>要素がそもそも欲しかったのでこのままで良しとしました。onclickの使い方の基礎がないからこんなことでハマるんですかね？