我想从用户使用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>