I already connected the html with js and I get the data from a form when the onclick is activated but since I save each data that I receive to use it later, how do I get the data out of the function without having problems:
var getData = () => {
let name = document.getElementById("name").value;
let age = document.getElementById("age").value;
if (name == "") {
document.getElementById("name").focus();
} else {
if (age == "") {
document.getElementById("age").focus();
} else {
console.log(name + " " + age);
document.getElementById("name").value = "";
document.getElementById("age").value = "";
document.getElementById("name").focus();
}
}
};
You should create an external variable to save the data you want, when the function you are using finishes, the data in it "disapears". So, in order to save it, you should create an external variable.
Anyways, should be good to know a bit more of the problem that you are facing with.
Some explanations in code comments:
// Define checkGetData function
const checkGetData = () => {
// Read data from input
const name = document.getElementById("name").value;
const age = document.getElementById("age").value;
if (name == "") {
// If name is empty, focus on field
document.getElementById("name").focus();
// Retuen false from getData function
return false;
} else if (age == "") {
// Same with age
document.getElementById("age").focus();
return false;
} else {
// If both field have value
// Log it
console.log(name + " " + age);
// Reset inputs
document.getElementById("name").value = "";
document.getElementById("age").value = "";
document.getElementById("name").focus();
}
// Return variables 'name' and 'age' from
// getData function back to caller. Values
// are still there, now they do not rely on
// input fields, because you first assign
// values to this variables from input fields
// and only after made this input fields empty.
return { name, age };
};
// Define submitForm function
const submitForm = () => {
// Call checkGetData function
// and set it's return value to new variable
const inputData = checkGetData();
// Check inputData
if (!inputData) {
// If inputData false
// show message in div
document.getElementById("info").innerText = "Some fields are empty!";
} else {
// If value exist, show
// it in div
document.getElementById("info").innerText = `Name: ${inputData.name}, Age: ${inputData.age}`;
}
//
// So basically now you have input values in
// inputData variable. You can pass it to any
// other function, or return to parent caller
// if it exist. Obviously this additional layer
// with function submitForm is added here just
// for reference and you can apply any logic
// you prefer
//
}Name: <input id="name" type="text"></input>
Age: <input id="age" type="number"></input>
<button onClick="submitForm()">Submit</button>
<br/>
<br/>
<div id="info" style="color:red"></div>