I want to send the input from id="question" and id="answer" to a javascript file to a json file and I want to store multiple questions with their answers , I don't know how to do that could anyone help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study App</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
</head>
<body>
<form action="">
<label class="Question_text" for="question">Question</label>
<input class="Question_input" id="question" placeholder="Enter your question" required>
<label class="answer_text" for="answer">Answer</label>
<input class="answer_input" id="answer" placeholder=" Enter your answer" required>
<button class="Reset_btn" type="reset">Clear Fields</button>
<button class="enter_question" type="submit">Enter Question</button>
</form>
<script src="index.js"></script>
</body>
</html>
first you need to get the values from the input like this
var q = document.getElementById("question")
var ans = document.getElementById("answer")
and then vanilla javascript cannot write to a fiile so you will need to use php or node.js or for local use you can use cookies or localstorage elsewise you can use some kind of database
You can the below JS function.
You have to call the function in onSubmit attribute of HTML form.
function exportToJSON() {
const userQuestion = document.getElementById("question").value;
const userAnswer = document.getElementById("answer").value;
const data = {
questions:
{
question: userQuestion,
answer: userAnswer
}
};
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, ' ')], {
type: "text/plain"
}));
a.setAttribute("download", "data.json");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study App</title>
</head>
<body>
<form action="" onSubmit="exportToJSON()">
<label class="Question_text" for="question">Question</label>
<input class="Question_input" id="question" placeholder="Enter your question" required>
<label class="answer_text" for="answer">Answer</label>
<input class="answer_input" id="answer" placeholder="Enter your answer" required>
<button class="Reset_btn" type="reset">Clear Fields</button>
<button class="enter_question" type="submit">Enter Question</button>
</form>
</body>
</html>