如何访问此特定元素的 html 值？

Question

这个例子有多个产品（工具），每个都有一个购买按钮，当我点击一个产品的购买按钮时，它应该将从 html spinbox 中提取的数量值发送到函数我的函数。

问题： --我总是以使用的变量 'a' 得到 myfunction 中第一个产品的值（因为所有产品都具有相同的 id）

无论如何要单独访问每个 HTML 的旋转框的值？

  {% for post in posts %}
    <article class="media content-section">
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-2" href="#">{{ post.type + " " + post.instrument }}</a>
          <small class="text-muted">{{ post.date_posted }}</small>
        </div>
        <h2><a class="article-title" href="#">{{ post.name }} : {{post.brand}}</a></h2>
        <div class="article-metadata">
          {% if post.type not in "Guitar" or "bass" %}
              <p class="article-content">{{"effects : " + post.frets + "\nColor : " + post.color + "\nportability : " + post.bridge}}</p>  
          {% else %}
              <p class="article-content">{{"Bridge : " + post.bridge + "\nColor : " + post.color + "\nFrets : " + post.frets}}</p>
          {% endif %}
        </div>
        <a class="mr-2" href="#">{{"Quantity"}} : {{post.quantity}}</a>

        <form>
          <input class="quant" name="quant" id="a" type="number" min="1" max={{post.quantity}} required>
          <br>
          <a>{{"Price:"}}</a>
          <a class="mr-2" href="#">{{post.price + "$"}}</a>
          <button type="submit" class="purchase" onclick="myFunction({{post.quantity}},'{{post.brand}}', '{{post.name}}', '{{post.price}}')">Purchase</button>
        </form>
      </div>
    </article>
{% endfor %}


        <script>
          function ajaxcall(quantity, brand, name){
            $.ajax({
                    url : "{{ url_for('quantity_update') }}",
                    type: 'POST',
                    data: {new_quantity: JSON.stringify(quantity), brand: JSON.stringify(brand), name: JSON.stringify(name)}
                });
          }
          function myFunction(quant, brand, name, price) {
            var a = document.getElementById('a').value;
            prix = parseInt(price) * a
            let text = "Press a button!\n--OK to Purchase (Total price : " + prix + ")\n--Cancel to cancel.";
            if (a) {
              if(confirm(text)){
                alert("Congrats, the product has been bought");
                quantity = quant - a;
                ajaxcall(quantity, brand, name);
              }
            } else {
              alert("Please insert a value before buying")
            }
            document.getElementById("demo").innerHTML = text;
          }
          </script>

Answer 1

由于您已经在使用 form 标签，我建议您将所有值输出到隐藏的 input 元素中。这样您就可以将每个值很好地存储在其自己的标签中，并在以后通过每个输入的名称检索这些值。

<form class="article-form">
  <input type="hidden" name="brand" value="{{post.brand}}" />
  <input type="hidden" name="name" value="{{post.name}}" />
  <input type="hidden" name="price" value="{{post.price}}" />
  <input type="hidden" name="quantity" value="{{post.quantity}}" />
  <input type="number" name="amount" class="quant" min="1" max="{{post.quantity}}" required>
  <button type="submit" class="purchase">Purchase</button>
</form>

表单具有 submit 事件，只要您单击 form 标记内的提交按钮，就会触发该事件。通过侦听此事件并添加我们自己的处理逻辑，我们可以从输入中提取所有值并断言我们的逻辑。

在 FormData API 的帮助下，我们可以轻松提取表单中存在的所有值。这些值可以通过相应输入的 name 属性值检索。

const forms = document.querySelectorAll('.article-form');

for (const form of forms) {
  form.addEventListener('submit', event => {
    event.preventDefault();

    const formData = new FormData(form);
    const amount = formData.get('amount');

    if (amount === null || amount === '') {
      alert("Please insert a value before buying");
      return;
    }

    const brand = formData.get('brand');
    const name = formData.get('name');
    const quantity = formData.get('quantity');

    const price = formData.get('price');
    const total = parseInt(price) * amount;
    const text = `Press a button!\n--OK to Purchase (Total price : ${total})\n--Cancel to cancel.`;

    alert("Congrats, the product has been bought");
    const newQuantity = quantity - amount;

    ajaxCall(newQuantity, brand, name);
  });
}

Answer 2

访问第一个数量的原因是因为具有相同 id 的多个元素是无效的 HTML - 通常浏览器将 return 文档匹配中的第一个元素提供给 document.getElementById.

的 id 值

一种解决方案是从数量输入中删除 id 值，而是将输入框定位为其父表单的子项。按钮（和其他表单元素）的父表单作为嵌套表单元素的 form 属性提供。

此示例将 form 元素从点击处理程序而不是 quantity 参数传递给函数 myFunction，并将 type="button" 属性添加到购买按钮以停止他们默认生成一个提交事件。

"use strict";
function myFunction(form, name, brand, price) {
   let quantity = form.querySelector(".quant");
   console.log("quantity for purchase is " + quantity.value);
}

<form name="whatever">
  <label>quantity: <input class="quant" value="1"></label>
  <button type=button onclick='myFunction( this.form, "name", "brand", "price")'>Purchase</button>
</form>
<form name="whatever">
  <label>quantity: <input class="quant" value="42"></label>
  <button type=button onclick='myFunction( this.form, "name", "brand", "price")'>Purchase</button>
</form>

请注意，不鼓励在 HTML 中提供事件处理程序，Emiels 的展示了一种重新编写代码以在 JavaScript 中提供点击事件侦听器的方法。

如何访问此特定元素的 html 值？

How to access the html value of this specific element?

html

javascript

jinja2

flask