Javascript 表单上的OnkeyUp事件只处理onw表单的元素，即使我在不同的表单中使用它

我有以下两种表格：

<li>

    <form name="1" id="gg" method="" >
    <div style="item-list">
    <div class="item-attribute">Oil</div>
    <div class="item-attribute" id="unit" value="40">40</div>
    <div class="item-attribute"><input type="text" style="width:30px;" id="quantity" onkeyup="total()"/></div>
    <div id="total" class="item-attribute"></div>
    <div style="float:left;margin-left:50px;"><input type="submit" value="Add To Cart"/></div>
    </div>
    </form>
</li>

<li>
    <form name="2" id="dg" method="" >
    <div style="item-list">
    <div class="item-attribute">salt</div>
    <div class="item-attribute" id="unit" value="13">13</div>
    <div class="item-attribute"><input type="text" style="width:30px;" id="quantity" onkeyup="total()"/></div>
    <div id="total" class="item-attribute"></div>
    <div style="float:left;margin-left:50px;"><input type="submit" value="Add To Cart"/></div>
    </div>
    </form>
</li>

我想要表单中的元素，在其中输入数字并执行计算，然后显示在表单上。 但在第二种形式中，当函数在onkeyup evet上被调用时，它采用的是第一种形式的元素，而不是它自己的元素

请帮我解决这个问题。

整个文档中的id必须是唯一的，而不是表单。

---

document.getElementById函数将返回整个文档上的第一个事件，尽管行为在技术上尚未定义，但标准浏览器将这样做。

如果使用JQuery，请将表单ID作为参数传递给函数

    <input type="text" style="width:30px;" id="quantity" onkeyup="total('dg')"/>

---

更改元素事件侦听器以获取事件参数：

<input type="text" style="width:30px;" id="quantity" onkeyup="total(event)"/>

---

您不应该对一个文档中的元素使用相同的id。

我没有使用Jquery。只有简单的Java脚本我编辑了答案，您可以检查这是否适用。不……当我在alert中打印id时，它会给出[ObjectHTMLFormElement]…当我在alert中打印表单时，它给出空值..但是quant没有像我们上面所做的那样被打印出来我不理解这个问题。您可以为此创建一个JSFIDLE吗？我会改正的。有什么方法可以让我得到当前形式的元素吗@UweBI已经进行了更新，以使其适用于您的示例，但这只是给您一些指导，您应该通过进一步调查来了解自己。OK。。谢谢你的帮助！！

function total(id)
{
    var form = document.getElementById(id)
    var quant=form.elements.item('quantity').value;
    alert(quant);
    var unit=form.elements.item('unit').value;

    var cost=quant*unit;
    form.elements.item('total').innerText = cost;
 }

<input type="text" style="width:30px;" id="quantity" onkeyup="total(event)"/>

function total(event) {
    var unit = event.target.parentNode.previousElementSibling.innerHTML;
    var qty = event.target.value;
    event.target.nextElementSibling.innerHTML = unit*qty;
}