如何建立一个全局变量或在其他文件中访问它。

Question

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

createUX.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('/');
    }

}

create.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

该项目是由我的createUX.js文件完成的，该文件有一个函数，可以将更多的divs附加到... questionNum 变量是 "客户端 "脚本的一部分：一个在用户的浏览器中运行的脚本。所以，作为 questionNum 在浏览器中设置，你必须把它的值传回服务器。

您可以通过在您的表单中添加一个隐藏的字段来实现，并使之成为 addQuestion 函数递增其值。

在形式上。

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

在addQuestion中，

​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;