如何修复Electron应用程序中的“SE50P未定义”错误？

Question

我正在使用Electron制作以下应用程序，并且在测试时我得到一个错误，说明SE50P is undefined实际上是什么时候！我已经尝试搜索谷歌并尝试进行代码更改，但似乎没有修复错误，所以我来到Stack Overflow寻找可以帮助我的人！

错误打印

我的JSON脚本：

{
  "DataInfo": [
    {
      "Earnings": "0",
      "Orders": "0"
    }
  ],
  "Items": [
    {
      "Slime_SE_50ML": "SSE50",
      "Slime_CE_50ML": "SCE50",
      "Slime_SE_100ML": "SSE100",
      "Slime_CE_100ML": "SCE100",
      "Slime_SE_150ML": "SSE150",
      "Slime_CE_150ML": "SCE150"
    }
  ],
  "Prices": [
    {
      "SE50ML": "1.9",
      "CE50ML": "2.9",
      "SE100ML": "3.8",
      "CE100ML": "4.2",
      "SE150ML": "5.7",
      "CE150ML": "6.4"
    }
  ]
}

网站/ APP代码：

function appendOrders(orders) {
  var ElementOrders = document.getElementById("Orders")
  ElementOrders.innerHTML = orders
}

function appendEarnings(earnings) {
  var ElementEarnings = document.getElementById("Earnings");
  ElementEarnings.innerHTML = earnings + "€"
}

function JSONLOAD() {
  "use strict";

  fetch("Static/Data/DATA.json")
    .then(function(resp) {
      return resp.json();
    })
    .then(function(data){
      var Earnings = data.DataInfo[0].Earnings;
      appendEarnings(Earnings);
      var Orders = data.DataInfo[0].Orders;
      appendOrders(Orders);
      var SlimeSE50 = data.Items[0].Slime_SE_50ML;
      var SlimeCE50 = data.Items[0].Slime_CE_50ML;
      var SlimeSE100 = data.Items[0].Slime_SE_100ML;
      var SlimeCE100 = data.Items[0].Slime_CE_100ML;
      var SlimeSE150 = data.Items[0].Slime_SE_150ML;
      var SlimeCE150 = data.Items[0].Slime_CE_150ML;
      var SE50P = data.Prices[0].SE50ML;
      var CE50P = data.Prices[0].CE50ML;
      var SE100P = data.Prices[0].SE100ML;
      var CE100P = data.Prices[0].CE100ML;
      var SE150P = data.Prices[0].SE150ML;
      var CE150P = data.Prices[0].CE150ML;
    })
}

function Form(){
    ON = document.getElementById("ON");
    console.log(ON.value);
    OD = document.getElementById("OD");
    console.log(OD.value);
    SKU = document.getElementById("SKU");
    console.log(SKU.value);
    var SKU = SKU.value;
    if (SKU == "SSE50") {
      var NewEarnings = Earnings + SE50P;
      json.DataInfo[0].Earnings = str(NewEarnings);
      console.log(NewEarnings)
    };
    if (SlimeCE50 == "SCE50") {
      return NewEarnings = Earnings + CE50P;
    };
    if (SlimeSE100 == "SSE100"){
      return NewEarnings = Earnings + SE100P;
    };
    if (SlimeCE100 == "SCE100") {
      return NewEarnings = Earnings + CE100P;
    };
    if (SlimeSE150 == "SSE150") {
      return NewEarnings = Earnings + SE150P;
    };
    if (SlimeCE150 == "SCE150"){
      return NewEarnings = Earnings + CE150P;
    }
}

JSONLOAD()

body {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background: #252C35;
  color: white;
}

#UpperBar {
  height: 45px;
}

.MASlime {
  position: absolute;
  font-size: 30px;
  top: 1px;
  left: 40px;
}

#Totals {
  position: absolute;
  font-size: 30px;
}

.Total {
  position: absolute;
  top: 70px;
  left: 130px;
}

.TotalEarnings {
  position: absolute;
  top: 70px;
  left: 200px;
}

.TotalO {
  position: absolute;
  top: 140px;
  left: 130px;
}

.TotalOrders {
  position: absolute;
  top: 140px;
  left: 200px;
}

#Earnings {
  position: absolute;
  top: 70px;
  left: 350px;
}

#Orders {
  position: absolute;
  top: 140px;
  left: 350px;
}

.NewOrder {
  position: absolute;
  top: 250px;
  left: 200px;
  font-size: 30px;
}

.OrderName {
  position: absolute;
  top: 350px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.OrderDate {
  position: absolute;
  top: 400px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SKU {
  position: absolute;
  top: 450px;
  left: 140px;
  width: 250px;
  height: 25px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
}

.SUBMIT {
  position: absolute;
  top: 500px;
  left: 220px;
  width: 100px;
  height: 40px;
  background-color: #252C35;
  color: white;
  border: 1px;
  border-style: solid;
  border-radius: 5px;
  border-color: white;
  padding: 5px;
  cursor: pointer;
}

.Menu {
  position: absolute;
  top: 25px;
  left: 480px;
  font-size: 30px;
  cursor: pointer;
}

.menu {
  text-align: center;
  width: 100%;
}

#H {
  display: block;
  border-bottom: 1px solid #EAEAED;
  border-top: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 120px;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 30px;
  background: #252C35;
}

#SR {
  display: block;
  border-bottom: 1px solid #EAEAED;
  text-decoration: none;
  color: white;
  margin-top: 0px;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 30px;
  background: #252C35;
}

.All {
  display: block;
}

#toggle {
  display: none;
}

.fadeIn {
  animation: fadein 1.3s ease-in;
}

@keyframes fadein {
  0% { opacity: 0; }
  25% { opacity: 0.3; }
  50% { opacity: 0.5; }
  75% { opacity: 0.8; }
  100% { opacity: 1; }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>EComerce App Slime</title>
    <link rel="stylesheet" href="Static/css/index.css">
    <link rel="icon" href="Static/Images/favicon.png">
  </head>
  <body>
    <div id="menu">
      <label for="toggle" class="Menu">&#9776;</label>
      <input type="checkbox" id="toggle" onclick="meuMenuToggle()"/>
      <div class="menu">
          <a id="H" href="#">HOME</a>
          <a id="SR" href="#">Slime Recipe</a>
      </div>
    </div>
    <div id="UpperBar">
      <p class="MASlime">MASlime</p>
    </div>
      <div id="HomePage">
        <div id="Totals">
          <p class="Total">Total</p>
          <p class="TotalEarnings">Earnings</p>
          <p class="TotalO">Total</p>
          <p class="TotalOrders">Orders</p>
          <p id="Earnings">100€</p>
          <p id="Orders">1</p>
        </div>
        <div id="NewOrder">
          <p class="NewOrder">New Order</p>
          <form id="OrderForm" onsubmit="Form()">
            <input id="ON" class="OrderName" type="text" name="OrderName" placeholder="Buyer Name" value="" required>
            <input id="OD" class="OrderDate" type="text" name="OrderDate" placeholder="Date of Order" required>
            <input id="SKU" class="SKU" type="text" name="ProductSKU" placeholder="Product SKU" required>
            <input class="SUBMIT" type="submit" name="Submit" value="SUBMIT">
          </form>
          <script type="text/javascript">
          input = document.getElementById("ON")
          console.log(input.value)
          </script>
        </div>
    </div>
    <script>
    var home = document.getElementById('HomePage');
    var menu = document.getElementsByClassName('menu')[0];
    menu.style.display = 'none';

    document.getElementById('toggle').onclick = () => {

    if (menu.style.display == 'none') setTimeout(fadeMenu, 150);
    else if(menu.style.display == 'block') setTimeout(fadeHome, 150);
    }

    function fadeMenu() {
      home.style.display = 'none';
      menu.classList.add('fadeIn');
      menu.style.display =  'block';
    }

    function fadeHome() {
      home.style.display = 'block';
      home.classList.add('fadeIn');
      menu.style.display = 'none';
    }
    </script>
    <script src="Static/js/index.js"></script>
  </body>
</html>

Answer 1

问题是变量SE50P在函数JSONLOAD的范围内声明，并且它已在函数Form中从范围之外访问。为了解决这个问题，应该在JSONLOAD函数之外的全局范围中定义这些变量。

您可以找到有关how scope works in javascript here的更多信息。