Question

为什么我的函数不能注册被单击的文本，但是我必须手动输入它才能进行总计计算吗？即，我的想法是，通过单击产品，它会显示在产品价格的输入字段[284]中，而当单击复选框选项以提高价格并将其显示在[388]的末尾时，现在，如果我在字段285中手动输入数字，则只能编译文本菜单。该怎么办？

function displayAbo(el) {
 document.getElementById("contactFormFieldId_284").value = el.querySelector('.product__title').textContent+ " " +el.querySelector('.product__price').textContent;
}
    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 ="CHF "+ sum + ".–";
}

function calculateSumWithInput(e) {
  var re = /\d+/; 
  var value = re.exec(e.target.value);
  if(value && !isNaN(value) && Number(value) === parseInt(value, 10)) {
      sum = parseInt(value, 10);
      finalInput.value = sum;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
    <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>
    <h4 class="product__price">CHF 39.–</h4>
  </div>
</div>

<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]]" readonly />
</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>

Answer 1

我进行了2次更改。

将您的blur函数更改为click

inputField.addEventListener（'click'，calculateSumWithInput，false）;
在您的函数中添加了click触发器

inputField.click（）;

function displayAbo(el) {
  document.getElementById("contactFormFieldId_284").value = el.querySelector('.product__title').textContent + " " + el.querySelector('.product__price').textContent;
  inputField.click();
}
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('click', calculateSumWithInput, false);
inputField.click();

function calculateTotal(e) {
  if (e.target.checked) {
    sum += parseInt(e.target.value, 10);
  } else {
    sum -= parseInt(e.target.value, 10);
  }
  finalInput.value = "CHF " + sum + ".–";
}

function calculateSumWithInput(e) {
  var re = /\d+/;
  var value = re.exec(e.target.value);
  if (value && !isNaN(value) && Number(value) === parseInt(value, 10)) {
    sum = parseInt(value, 10);
    finalInput.value =  "CHF " + sum + ".–";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
    <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>
    <h4 class="product__price">CHF 39.–</h4>
  </div>
</div>

<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]]" readonly />
</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 个答案: