Eu queria uma maneira de inserir o output do meu js ON.value | OD.value | SKU.value
em um ficheiro json.
Resumindo eu queria que o meu js criasse uma array
com o a informação ON.value | OD.value | SKU.value
do js no formato que eu apresentei abaixo do JS. Qualquer informação adicional necessária porfavor diga!
Estou a usar o electron ou seja a informação pode ser gravada ofline localmente!
JS
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);
}
Formato json
{
"on.value aqui":[
{
"ORDER NAME": "ON.value aqui",
"ORDER DATE": "OD.value aqui",
"SKU": "SKU.value aqui"
}
]
}
Caso seja necessário tem aqui o website todo:
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)
})
}
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);
}
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%;
}
.menu a {
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;
}
.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">☰</label>
<input type="checkbox" id="toggle" onclick="meuMenuToggle()"/>
<div class="menu">
<a 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>