功能上下文

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

请勿使用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的行为与其他语言不同，请查看the docs

在函数内部使用时，它在非严格模式下返回全局对象（窗口），或在严格模式下返回未定义或基本调用者。

功能上下文

在函数内部，其值取决于函数的调用方式。

简单的电话
function f1(){   return this; }

f1() === window; // global object
在这种情况下，这个值是没有通过电话设置。由于代码不是严格模式，因此值其中必须始终是一个对象，因此它默认为全局对象。
function f2(){
  "use strict"; // see strict mode
  return this; }

f2() === undefined; 
在严格模式下，其值保持为   进入执行上下文时设置的内容。如果不是   定义，它仍然未定义。它也可以设置为任何值，例如   as null或42或＆＃34;我不是这个＆＃34;。


注意：在第二个例子中，这应该是未定义的，因为f2是     在没有提供任何基础的情况下调用（例如window.f2（））。此功能     当他们第一次开始支持时，在某些浏览器中没有实现     严格模式。结果，他们错误地返回了窗口对象。

Answer 2

我看到的唯一问题是你在itemName的值中有一个空格。不知不觉中，我发现自己打字了＃34; egg＆＃34;得到＆＃34;鸡蛋＆＃34 ;.如果我退格，它会工作正常。作为评论，我建议使用下拉列表来更好地控制输入值。

小提琴：Here

<div id="container">
    <header>
        <h1>My Cash Register</h1>
    </header>
    <div id="pad">
        <div>Enter item
            <select id="itemName">
                <option value="eggs">Eggs</option>
                <option value="milk">Milk</option>
            </select>
        </div>
        <div>Enter quantity of the item
            <input type="number" id="itemQuantity" value="0">
        </div>
        <button id="button">Calculate Total Amount per Item</button>
        <p>The total amount for this item:</p>
        <p id="itemTotalDisplay"></p>
    </div>
</div>`

Answer 3

您的代码运行良好。

你要做的就是做这两件事之一：

在你获得项目的行中添加一个trim（）（它将删除你在输入中输入的字符串之前和之后的所有空格，这是一个很好的做法总是这样做）：

var item = document.getElementById("itemName").value.trim();

或删除项目输入值的空格：

<input type="text" id="itemName" value="">

问题是你得到的Item值在开头“eggs”处有一个空格，所以开关会忽略你的输入，因为没有与之匹配的情况。

另外，作为建议，不要为每个输入使用表单。表格标签应围绕您正在进行的操作中所需的标签的所有输入。

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

3 个答案:

功能上下文

简单的电话