如何从选择选项中乘以2个数字并对结果求和

Question

我有一个表单字段与我的服务(徽标设计和信头设计)的2个选择选项，在那里我希望用户选择他们想要的徽标或信头设计的数量或两者。

例如，他们可以选择2个徽标设计和3个信头设计。这两种设计都有固定的数量。我只想让他们选择他们想要的数字，他们可以预览所有人的总金额，然后再付款。

我已经完成了表单，我还可以看到每个选择选项的金额，但我被困在一起计算这两个服务。

我对javascript不是很在行，但我懂一点。

​

//Calculate branding amount by selected option
function logo(val) {
  var logo = val * 20000;
  document.getElementById("ansval").value = logo;
  var letterhead = vall * 20000;
  document.getElementById("ansval").value = letterhead;
  document.getElementById("ansval").value = logo + letterhead;
}

<form>
  <div class="form-group">
    <label for="logonumber">Number of logos required</label>
    <select class="form-control" id="logonumber" onChange="logo(this.value)">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
  <div class="form-group">
    <label for="letterheads">Number of letterheads required</label>
    <select class="form-control" id="letterheads" onChange="logo(this.value)">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
  </div>
  <div class="form-group">
    <input type="text" name="ansval" id="ansval" disabled>
  </div>
  <p></p>
  <button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>

​

Answer 1

要做到这一点，最好让您的函数从DOM中读取两个选定的值，而不是传入一个值，然后尝试确定另一个值应该是什么。然后，您可以非常简单地执行计算，并使用结果更新#ansval元素。

请注意，在下面的示例中使用了parseInt()，以便将值视为要相加的数字，而不是要连接的字符串。还要注意使用不显眼的事件绑定。使用onchange和其他内联事件属性是不好的做法，应尽可能避免使用。

说了这么多，试试这个：

​

let logoEl = document.querySelector('#logonumber');
let letterheadEl = document.querySelector('#letterheads');

logoEl.addEventListener('change', calcTotal);
letterheadEl.addEventListener('change', calcTotal);

function calcTotal() {
  var numLogo = (parseInt(logoEl.value, 10) || 0) * 20000;
  var numLetterHead = (parseInt(letterheadEl.value, 10) || 0) * 20000;
  document.querySelector("#ansval").value = numLogo + numLetterHead;
}

<div class="form-group">
  <label for="logonumber">Number of logos required</label>
  <select class="form-control" id="logonumber">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</div>
<div class="form-group">
  <label for="letterheads">Number of letterheads required</label>
  <select class="form-control" id="letterheads">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</div>
<div class="form-group">
  <input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>

​

Answer 2

您的函数必须接受提交的两个值才能正确计算。我只是稍微修改了一下你的代码，就完成了。

​

function logo(val)
        {
		
		var logo = document.getElementById("logonumber").value;
        var letterhead = document.getElementById("letterheads").value;  
        document.getElementById("ansval").value = (logo * 20000) + (letterhead * 20000);

        }

   <div class="form-group">
   
    <label for="logonumber">Number of logos required</label>
    <select class="form-control" id="logonumber" onChange="logo(this.value)">
      <option value="0">0</option>
	  <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>


    <div class="form-group">
    <label for="letterheads">Number of letterheads required</label>
    <select class="form-control" id="letterheads" onChange="logo(this.value)">
      <option value="0">0</option>
	  <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div> 
    <div class="form-group">
        <input type="text" name="ansval" id="ansval" disabled>
  </div>
    <p></p>                             
  <button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>

​