Question

我正在尝试从输入字段和复选框值中计算值。

这是我的html和js，通过它们我可以在输入字段中获取值：

function displayAbo(el) {
  document.getElementById("contactFormFieldId_284").value =
    el.querySelector('.product__title').textContent + " " +
    el.querySelector('.product__price').textContent;
}

    <div class="product__item" onclick="displayAbo(this)" id="product-basic" tabindex="0" role="radio" aria-checked="false" aria-describedby="basic-desc">
      <div class="product__inner" id="basic-desc" onclick="smoothScroll(document.getElementById('scroll'))">
        <h3 class="product__title">LEUWIN M</h3>
        <ul class="product__features">
          <li class="product__features-item">40 Mbit/s</li>
          <li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
        </ul>
        <div class="product_footer">
          <h4 class="product__price">CHF 39.–</h4>
          <p class="product__bestellen">Zum Bestellformular</p>
        </div>
      </div>
    </div>
    <div class="product__item" onclick="displayAbo(this)" id="product-medium" tabindex="-1" role="radio" aria-checked="false" aria-describedby="medium-desc">
      <div class="product__inner" id="medium-desc" onclick="smoothScroll(document.getElementById('scroll'))">
        <h3 class="product__title">LEUWIN L</h3>
        <ul class="product__features">
          <li class="product__features-item">100 Mbit/s</li>
          <li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
        </ul>
        <div class="product_footer">
          <h4 class="product__price">CHF 49.–</h4>
          <p class="product__bestellen">Zum Bestellformular</p>
        </div>
      </div>
    </div>



    <!--Checkbox and Result Field-->
<div class="contact row">
<label for="contactFormFieldId_284" style="color: #003664; font-size: 16px; font-weight: bold;">[[284_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_284" type="text" name="contactFormField_284" value="[[284_VALUE]]" />
</div>
    <div class="contact row">
      <label for="contactFormFieldId_385">[[385_LABEL]]</label>
      <input class="contactFormClass_checkbox" id="contactFormFieldId_385" type="checkbox" name="contactFormField_385" value="5" [[SELECTED_385]] />
    </div>
    <div class="contact row">
      <label for="contactFormFieldId_386">[[386_LABEL]]</label>
      <input class="contactFormClass_checkbox" id="contactFormFieldId_386" type="checkbox" name="contactFormField_386" value="15" [[SELECTED_386]] />
    </div>
    <div class="contact row">
      <label for="contactFormFieldId_387">[[387_LABEL]]</label>
      <input class="contactFormClass_checkbox" id="contactFormFieldId_387" type="checkbox" name="contactFormField_387" value="20" [[SELECTED_387]] />
    </div>
    <div class="contact row">
      <label for="contactFormFieldId_388" style="color: #003664; font-size: 16px; font-weight: bold;">[[388_LABEL]]</label>
      <input class="contactFormClass_text" id="contactFormFieldId_388" type="text" name="contactFormField_388" value="0" />
    </div>

使用此代码，我可以从复选框中计算值

  window.onload=function(){
      var inputs = document.getElementsByClassName('contactFormClass_checkbox'),
          total  = document.getElementById('contactFormFieldId_388');

             for (var i=0; i < inputs.length; i++) {
             inputs[i].onchange = function() {
              var add = this.value * (this.checked ? 1 : -1);
              total.innerHTML = parseFloat(total.innerHTML) + add
              var new_total = parseFloat(document.getElementById('contactFormFieldId_388').value);
              console.log(new_total);
              document.getElementById('contactFormFieldId_388').value=new_total + add
              
          }
        }
      }

现在，我必须从该字段中收集值，我认为自己已经解析并值了，我用这段代码做到了，其余的我仍然必须包括该代码，但是我没有成功..

var price = document.querySelector('[aria-checked=true] .product__price').innerHTML;
var multiplier = price.substr(price.indexOf(" ")+1,price.indexOf('.') - price.indexOf(" ")-1);
var new_total = multiplier *

有人可以帮助我，看看加起来时我在哪里出错。谢谢！

Answer 1

var checkBoxes = document.getElementsByClassName('contactFormClass_checkbox');
        var sum = 0,
            inputField = document.getElementById('contactFormFieldId_284'),
            finalInput = document.getElementById('contactFormFieldId_388');

        Array.prototype.slice.call(checkBoxes).forEach( (checkBox) => {
            checkBox.addEventListener('change', calculateTotal, false);
        })

        inputField.addEventListener('blur', calculateSumWithInput, false);

        function calculateTotal(e) {
            if(e.target.checked) {
                sum += parseInt(e.target.value, 10);
            } else {
                sum -= parseInt(e.target.value, 10);
            }
            finalInput.value = sum;
        }

        function calculateSumWithInput(e) {
            var value = e.target.value;
            if(value && !isNaN(value) && Number(value) === parseInt(value, 10)) {
                sum = parseInt(value, 10);
                finalInput.value = sum;
            }
        }

<div class="product__item" onclick="displayAbo(this)" id="product-basic" tabindex="0" role="radio" aria-checked="false" aria-describedby="basic-desc">
  <div class="product__inner" id="basic-desc" onclick="smoothScroll(document.getElementById('scroll'))">
    <h3 class="product__title">LEUWIN M</h3>
    <ul class="product__features">
      <li class="product__features-item">40 Mbit/s</li>
      <li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
    </ul>
    <div class="product_footer">
      <h4 class="product__price">CHF 39.–</h4>
      <p class="product__bestellen">Zum Bestellformular</p>
    </div>
  </div>
</div>
<div class="product__item" onclick="displayAbo(this)" id="product-medium" tabindex="-1" role="radio" aria-checked="false" aria-describedby="medium-desc">
  <div class="product__inner" id="medium-desc" onclick="smoothScroll(document.getElementById('scroll'))">
    <h3 class="product__title">LEUWIN L</h3>
    <ul class="product__features">
      <li class="product__features-item">100 Mbit/s</li>
      <li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
    </ul>
    <div class="product_footer">
      <h4 class="product__price">CHF 49.–</h4>
      <p class="product__bestellen">Zum Bestellformular</p>
    </div>
  </div>
</div>



<!--Checkbox and Result Field-->
<div class="contact row">
<label for="contactFormFieldId_284" style="color: #003664; font-size: 16px; font-weight: bold;">[[284_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_284" type="text" name="contactFormField_284" value="" />
</div>
<div class="contact row">
  <label for="contactFormFieldId_385">[[385_LABEL]]</label>
  <input class="contactFormClass_checkbox" id="contactFormFieldId_385" type="checkbox" name="contactFormField_385" value="5" [[SELECTED_385]] />
</div>
<div class="contact row">
  <label for="contactFormFieldId_386">[[386_LABEL]]</label>
  <input class="contactFormClass_checkbox" id="contactFormFieldId_386" type="checkbox" name="contactFormField_386" value="15" [[SELECTED_386]] />
</div>
<div class="contact row">
  <label for="contactFormFieldId_387">[[387_LABEL]]</label>
  <input class="contactFormClass_checkbox" id="contactFormFieldId_387" type="checkbox" name="contactFormField_387" value="20" [[SELECTED_387]] />
</div>
<div class="contact row">
  <label for="contactFormFieldId_388" style="color: #003664; font-size: 16px; font-weight: bold;">[[388_LABEL]]</label>
  <input class="contactFormClass_text" id="contactFormFieldId_388" type="text" name="contactFormField_388" value="0" />
</div>

从输入字段和复选框添加值

1 个答案: