如何修复电子应用程序中的“ SE50P is undefined”错误？

Question

我正在使用Electron制作以下应用程序，并且在测试时出现错误，指出SE50P is undefined实际上是SE50P is undefined ！ 我已经尝试搜索Google并尝试进行代码更改，但是它似乎并没有解决错误，因此我来到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"
    }
  ]
}

WEBSITE / 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在SE50P函数的作用JSONLOAD并且已从函数Form的作用域外部进行访问。 为了解决此问题，应在JSONLOAD函数外部的全局范围内定义这些变量。

您可以在javascript中找到有关范围如何工作的更多信息。