使用Case Switch返回0而不是正确结果分配给变量的编号

Question

我是JavaScript的初学者,我想用HTML和JavaScript模拟练习.基本上,我有两个输入,1:产品名称和2)此项目的数量.当用户单击按钮时,将执行计算该项目总金额的功能.在这个函数上,我使用switch语句来根据产品计算正确的$ amount.然后该函数应该打印itemTotal,它是itemQ(项目的数量)的结果*该项目的固定值(鸡蛋为3.5).但itemTotal显示0为零.似乎switch语句无法识别它.如果我在switch中使它成为本地值,那么我就不能在switch语句之外使用了.我能做什么？有任何想法吗？

function calTotItemA() {
  var item = document.getElementById("itemName").value;
  var itemQ = document.getElementById("itemQuantity").value;
  var itemTotal = 0;
  switch (item) {
    case "eggs":
      this.itemTotal = 3.5 * itemQ;
      break;
    case "milk":
      this.itemTotal = 4.5 * itemQ;
      break;
  }
  document.getElementById("itemTotalDisplay").innerHTML = itemTotal;
}

header {
  background-color: #83BD26;
}
h1 {
  text-align: center;
}
#pad {
  background-color: #B5BFA4;
}
#container {
  border: 3px solid black;
}
#itemBox {
  height: 3px;
  widht:
}

<div id="container">
  <header>
    <h1>My Cash Register</h1>
  </header>
  <div id="pad">
    <form>Enter item
      <input type="text" id="itemName" value=" ">
    </form>
    <form>Enter quantity of the item
      <input type="number" id="itemQuantity" value="0">
    </form>
    <button onclick="calTotItemA()">Calculate Total Amount per Item</button>
    <p>The total amount for this item:</p>
    <p id="itemTotalDisplay"></p>
  </div>
</div>

Answer 1

function calTotItemA() {
  var item = document.getElementById("itemName").value;
  var itemQ = document.getElementById("itemQuantity").value;
  var itemTotal = 0;
  switch (item) {
    case "eggs":
      itemTotal = 3.5 * itemQ;
      break;
    case "milk":
      itemTotal = 4.5 * itemQ;
      break;
  }
  document.getElementById("itemTotalDisplay").innerHTML = itemTotal;
}

header {
  background-color: #83BD26;
}
h1 {
  text-align: center;
}
#pad {
  background-color: #B5BFA4;
}
#container {
  border: 3px solid black;
}
#itemBox {
  height: 3px;
  widht:
}

<div id="container">
  <header>
    <h1>My Cash Register</h1>
  </header>
  <div id="pad">
    <form>Enter item
      <input type="text" id="itemName" value="">
    </form>
    <form>Enter quantity of the item
      <input type="number" id="itemQuantity" value="0">
    </form>
    <button onclick="calTotItemA()">Calculate Total Amount per Item</button>
    <p>The total amount for this item:</p>
    <p id="itemTotalDisplay"></p>
  </div>
</div>

不要用this.看看上面的代码片段,我所做的就是删除this(并删除value属性中的空格,itemName因为它让我错误地添加了一个额外的空格)

你的代码应该是:

function calTotItemA() {
  var item = document.getElementById("itemName").value;
  var itemQ = document.getElementById("itemQuantity").value;
  var itemTotal = 0;
  switch (item) {
    case "eggs":
      itemTotal = 3.5 * itemQ;
      break;
    case "milk":
      itemTotal = 4.5 * itemQ;
      break;
  }
  document.getElementById("itemTotalDisplay").innerHTML = itemTotal;
}

该关键字的this行为与其他语言不同,请查看文档

在函数内部使用时,它在非严格模式下返回全局对象(窗口),或者在严格模式下返回未定义或基本调用者.

功能上下文

在函数内部,其值取决于函数的调用方式.

简单的电话

function f1(){   return this; }

f1() === window; // global object

在这种情况下,调用不会设置此值.由于代码不是严格模式,因此该值必须始终为对象,因此默认为全局对象.

function f2(){
  "use strict"; // see strict mode
  return this; }

f2() === undefined; 

在严格模式下,此值保持为进入执行上下文时设置的值.如果没有定义,它仍然是未定义的.它也可以设置为任何值,例如null或42或"我不是这个".

注意:在第二个示例中,这应该是未定义的,因为调用f2时不提供任何基础(例如window.f2()).某些浏览器在首次启动支持严格模式时未实现此功能.结果,他们错误地返回了窗口对象.