javascript - 如何通过多个 EJS 数据字段的 onClick 填充多个表单字段

Question

如果这个问题在其他地方得到了回答，我深表歉意，请指出那个方向。

从动态填充的列表中，我已经弄清楚如何单击列表中的一项并将该文本转到我的表单输入中。

我的ejs代码...

 <% for(var i=0; i<BeerList.length; i++) {%>
    <div>
      <a onclick="document.getElementById('beerName').value='<%= BeerList[i].beer.beer_name %>'" >
        <span><%= BeerList[i].beer.beer_name %></span>
      </a>
    </div>
 <% } %>

...将显示啤酒名称列表...

刺耳天使波本世涛

喵萨!

瓦达

慷慨的IPA

B炸弹(2019)

当我点击一种啤酒名称时，该名称将填充我的表单输入字段。

表单代码...

<form>
<input type="text" id="beerName" />
</form>

这工作正常，但我不知道如何将单独的数据添加到单独的表单输入中。例如，如果我想在啤酒名称之外还包含啤酒厂名称，我会尝试这样的操作...

 <% for(var i=0; i<BeerList.length; i++) {%>
    <div>
      <a onclick="document.getElementById('beerName').value='<%= BeerList[i].beer.beer_name %>'" >
        <span><%= BeerList[i].beer.beer_name %></span>
        <span><%= BeerList[i].brewery.brewery_name %></span>
      </a>
    </div>
 <% } %>


<form>
   <input type="text" id="beerName" />
   <input type="text" id="breweryName" />
</form>

这显然行不通，因为我的 onClick 甚至无法查找 id=breweryName。如果我为 form 提供像 form id="beerANDbrewery" 这样的 id，我不知道如何将每个项目放入适当的输入字段中。

非常感谢您提供的任何帮助!

Answer 1

您可以创建一个处理这两种情况的函数。该函数应将您想要的值作为参数。

<% for(var i=0; i<BeerList.length; i++) {%>
    <div>
        <a onclick="addText('<%= BeerList[i].beer.beer_name %>', '<%= BeerList[i].brewery.brewery_name %>') " >
        <span><%= BeerList[i].beer.beer_name %></span>
        <span><%= BeerList[i].brewery.brewery_name %></span>
       </a>
    </div>
<% } %>

<form>
   <input type="text" id="beerName" />
   <input type="text" id="breweryName" />
</form>


<script type="text/javascript">
    var addText = function(beerName, breweryName) {
        document.getElementById('beerName').value = beerName;
        document.getElementById('breweryName').value = breweryName;
    }
</script>