How do I save the content after the onclick?-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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>