Quiero enviar la entrada de id="pregunta" e id="respuesta" a un archivo javascript a un archivo json y quiero almacenar varias preguntas con sus respuestas, no sé cómo hacerlo, ¿alguien podría ayudar?
<!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>primero necesita obtener los valores de la entrada como esta
var q = document.getElementById("question") var ans = document.getElementById("answer")y luego vanilla javascript no puede escribir en un archivo, por lo que deberá usar php o node.js o para uso local, puede usar cookies o almacenamiento local; de lo contrario, puede usar algún tipo de base de datos
Puede la siguiente función JS.
Debe llamar a la función en el atributo onSubmit del formulario HTML.
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>