我想从用户使用 javascript 填写的表单输入中动态更改按钮的值

Question

用户填写表单（定制产品），我想利用他的输出动态更改按钮的信息。

我已成功定位用户的元素，但我可以更改按钮的值....

我的表格：

   <form>
       <fieldset>
          <legend>Selecting elements</legend>
          <p>
             <label>Select type : </label>
             <select id="type" name="type">
               <option> X </option>
               <option> Palleitte </option>
             </select>

          </p>
       </fieldset>
    </form>

我的按钮：

  <button name="julien" class="snipcart-add-item" id="my-button"
    data-item-id="{{ product.identifier }}"
    data-item-name="{{ product.name }}"
    data-item-price="20.00"



    data-item-custom2-name="Type"
    data-item-custom2-options="Cachet|Palleitte"
    data-item-custom2-value=""

    data-item-custom3-name="Quantité"
    data-item-custom3-options="100g|200g|500g|1kg|100kg"
    data-item-custom3-value="500g"
    >
    ADD TO THE CART 
  </button>

到目前为止我的 JS 代码：

<script>

    document.getElementById("type").addEventListener("click", function(){
      const x = document.getElementById("my-button");
      console.log(x);

      console.log(document.getElementById("type"));
      document.getElementById("my-button").innerText = "change by the input of user";
});

</script>

我希望通过用户填写表单的值来更改按钮的值：data-item-custom2-value=""，提前致谢！

Answer 1

您的 HTML 很好，但 javascript 需要进行一些更改，如下所示

    document.getElementById("type").addEventListener("change", function(elem){
      var e = document.getElementById("type");
      var selectedValue = e.options[e.selectedIndex].value;
      document.getElementById("my-button").innerText = selectedValue;
});

 <form>
       <fieldset>
          <legend>Selecting elements</legend>
          <p>
             <label>Select type : </label>
             <select id="type" name="type">
               <option> X </option>
               <option> Palleitte </option>
             </select>

          </p>
       </fieldset>
    </form>
  <button name="julien" class="snipcart-add-item" id="my-button"
    data-item-id="{{ product.identifier }}"
    data-item-name="{{ product.name }}"
    data-item-price="20.00"



    data-item-custom2-name="Type"
    data-item-custom2-options="Cachet|Palleitte"
    data-item-custom2-value=""

    data-item-custom3-name="Quantité"
    data-item-custom3-options="100g|200g|500g|1kg|100kg"
    data-item-custom3-value="500g"
    >
  </button>