如何创建全局变量或能够在其他文件中访问它

Question

所以我有一个nodejs项目，我有一个动态表单，如果用户单击"添加问题"，它就会展开。此功能由我的createUX.js文件完成，该文件具有在单击按钮时将更多div附加到html表单的功能。该文件还跟踪变量中的问题数。现在我想在我的 create.js 文件中访问这个变量，该文件实际上将问题添加到我的数据库中，以便我知道要添加多少问题。 我的 createUX.js 文件在我的公共目录下，而我的 create.js 文件在我的路由目录下。我怎样才能做到这一点？我已经尝试导出变量，但它给了我变量的起始值。我还尝试将整个文件导入 var 并在文件上调用 .questionNum。谢谢！

创建用户体验

.js

var questionNum = 1; //starts at two because question 1 is already present
function addQuestion() {
questionNum += 1;
var questionSet = document.getElementById('questionSet');
var question = document.createElement('div');
var questionText = document.createElement('input');
var answerA = document.createElement('input');
var answerB = document.createElement('input');
var answerC = document.createElement('input');
var answerD = document.createElement('input');
// setting up correct answer
var correct = document.createElement('select');
var choiceA = document.createElement('option');
var choiceB = document.createElement('option');
var choiceC = document.createElement('option');
var choiceD = document.createElement('option');
choiceA.setAttribute('value', 1)
choiceB.setAttribute('value', 2)
choiceC.setAttribute('value', 3)
choiceD.setAttribute('value', 4)
choiceA.innerHTML = 'A';
choiceB.innerHTML = 'B';
choiceC.innerHTML = 'C';
choiceD.innerHTML = 'D';
correct.appendChild(choiceA);
correct.appendChild(choiceB);
correct.appendChild(choiceC);
correct.appendChild(choiceD);
//set names
question.setAttribute('id', 'question' + questionNum);
questionText.setAttribute('name', 'questionText' + questionNum);
answerA.setAttribute('name', questionNum + 'a' + 1);
answerB.setAttribute('name', questionNum + 'a' + 2);
answerC.setAttribute('name', questionNum + 'a' + 3);
answerD.setAttribute('name', questionNum + 'a' + 4);
correct.setAttribute('name', 'correct' + questionNum);
//set input types
questionText.setAttribute('type', 'text');
answerA.setAttribute('type', 'text');
answerB.setAttribute('type', 'text');
answerC.setAttribute('type', 'text');
answerD.setAttribute('type', 'text');
//set placeholders
questionText.setAttribute('placeholder', 'Question ' + questionNum);
answerA.setAttribute('placeholder', 'Answer A');
answerB.setAttribute('placeholder', 'Answer B');
answerC.setAttribute('placeholder', 'Answer C');
answerD.setAttribute('placeholder', 'Answer D');
//append question text and answer to question div
question.appendChild(document.createElement('br'));
question.appendChild(questionText);
question.appendChild(document.createElement('br'));
question.appendChild(document.createElement('br'));
question.appendChild(answerA);
question.appendChild(answerB);
question.appendChild(document.createElement('br'));
question.appendChild(document.createElement('br'));
question.appendChild(answerC);
question.appendChild(answerD);
question.appendChild(document.createElement('br'));
question.appendChild(document.createElement('br'));
//create and append label
var label = document.createElement('label');
label.innerHTML = 'Correct:&nbsp';
question.appendChild(label);
//continue appending rest of stuffs to question div
question.appendChild(correct);
question.appendChild(document.createElement('br'));
question.appendChild(document.createElement('br'));
//append question to current question set
questionSet.appendChild(document.createElement('br'));
questionSet.appendChild(question);
questionSet.appendChild(document.createElement('br'));
// have to remove and reappend the create button so that it appears at the end
questionSet.removeChild(document.getElementById('createButton'));
var createButton = document.createElement('button');
createButton.setAttribute('id', 'createButton');
createButton.innerHTML = 'Create Set'
questionSet.appendChild(createButton);
question.style.backgroundColor = randomColor();
}
//Called when user wants to exit quiz creator
function cancelQuiz() {
if (confirm("Are you sure you want to exit? All work will be DELETED!")) {
window.location.href = "../";
}
}
function randomColor() {
var colors = ['#4CAF50', '#f94a1e', '#3399ff', '#ff9933'];
var randomNum = Math.floor(Math.random() * 4);
return colors[randomNum];
}
function setBGColor() {
var randColor = randomColor();
document.getElementById('question1').style.backgroundColor = randColor;
}

创建.js

const express = require('express');
const router = express.Router();
let Set = require('../models/set');
var numAnswers = 4; //how many answer choices do you want?
var createUX = require('../public/create/js/createUX');
module.exports = {
createRender: (req, res) => {
res.render('pages/create.ejs');
},
create: (req, res) => {
var questionNum = createUX.questionNum;
var title = req.body.title;
var subtitle = req.body.subtitle;
var descriptionTitle = req.body.descriptionTitle;
var description = req.body.description;
var photoRef = "";
var questions = [];
for (var i = 1; i <= questionNum; i++) {
var questionText = req.body[`questionText${i}`];
var answers = [];
for (var j = 1; j <= 4; j++) {
var answer = req.body[`${i}a${j}`];
answers.push(answer);
}
var correct = req.body[`correct${i}`];
var qtags = [];
var question = { questionText, answers, correct, qtags };
questions.push(question);
}
var sTags = []
var creator = "Bao"
var upvotes = "0"
let newSet = new Set({
title: title,
subtitle: subtitle,
descriptionTitle: descriptionTitle,
description: description,
photoRef: photoRef,
questions: questions,
sTags: sTags,
creator: creator,
upvotes: upvotes
});
var doc = db.collection('sets').insertOne(newSet);
console.log('set created');
res.redirect('/');
}
}

创建.ejs

<!DOCTYPE html>
<html>
<head>
<title> Creator | KPRO </title>
<link rel="stylesheet" href="../../public/create/css/create.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body onload="setBGColor()">
<!-- #2DO: Set word limit for titles/descriptions/questions/answers and make cap for how many questions you can add -->
<form method="POST" action="/create" id="questionSet">
<h1>Create Question Set</h1>
<p>add cover image</p>
<input type="text" name="title" placeholder="Title" autofocus required />
<input type="text" name="subtitle" placeholder="Subtitle" autofocus required />
<input type="text" name="descriptionTitle" placeholder="Description Title" autofocus required />
<input type="text" name="description" placeholder="Description" autofocus required />
<br>
<br>
<div id="question1">
<br>
<input name="questionText1" type="text" placeholder="Question 1" autofocus required />
<br>
<br>
<input name="1a1" type="text" placeholder="Answer A" autofocus required />
<input name="1a2" type="text" placeholder="Answer B" autofocus required />
<br>
<br>
<input name="1a3" type="text" placeholder="Answer C" autofocus required />
<input name="1a4" type="text" placeholder="Answer D" autofocus required />
<br>
<br>
<label> Correct:&nbsp </label>
<select name="correct1">
<option value=1>A</option>
<option value=2>B</option>
<option value=3>C</option>
<option value=4>D</option>
</select>
<br>
<br>
</div>
<br>
<button id='createButton'>Create Set</button>
</form>
<br>
<button onclick="addQuestion()">Add another question</button>
<br>
<br>
<button onclick='cancelQuiz()'>Cancel</button>
<script src="../../socket.io/socket.io.js"></script>
<script src="../../public/create/js/createUX.js"></script>
</body>
</html>

Answer 1

questionNum变量是"客户端"脚本的一部分：在用户浏览器中运行的脚本。因此，由于questionNum的最终值是在浏览器中设置的，因此您必须将其值发送回服务器。

您可以通过向表单添加隐藏字段并使addQuestion函数增加其值来做到这一点。

在形式中：

<input type="hidden" id="questionNum" name="questionNum" value="1">

在添加问题中：

​var questionNum = document.getElementById("questionNum").value;
questionNum = Number(questionNum);
questionNum +=1;
document.getElementById("questionNum").value = questionNum;

然后在create.js中获取其值：

module.exports = {
create: (req, res) => {
var questionNum = req.body.questionNum;