Javascript 正确地增加细枝值

我想用symfony4做一个测验。 我将一系列问题传递给我的模板，我尝试在用户单击答案时调用一个函数来加载下一个问题

以下是我尝试过的：

function nextQuestion(){
                {% set i = i+1 %}
                var qst = document.getElementById("question");
                var ans1 =  document.getElementById("answer1");
                var ans2 =  document.getElementById("answer2");
                var ans3 =  document.getElementById("answer3");
                var ans4 =  document.getElementById("answer4");
                qst.innerHTML = "<p>{{qsts[i].getText}}</p>";
                ans1.innerHTML = "<p>{{qsts[i].getAnswers[0]}}</p>";
                ans2.innerHTML = "<p>{{qsts[i].getAnswers[1]}}</p>";
                ans3.innerHTML = "<p>{{qsts[i].getAnswers[2]}}</p>";
                ans4.innerHTML = "<p>{{qsts[i].getAnswers[3]}}</p>";
            }

函数nextQuestion（）{
{%set i=i+1%}
var qst=document.getElementById（“问题”）；
var ans1=document.getElementById（“answer1”）；
var ans2=document.getElementById（“answer2”）；
var ans3=document.getElementById（“answer3”）；
var ans4=document.getElementById（“answer4”）；
qst.innerHTML=“{qsts[i].getText}
”；
ans1.innerHTML=“{qsts[i].getAnswers[0]}
”；
ans2.innerHTML=“{qsts[i].getAnswers[1]}
”；
ans3.innerHTML=“{qsts[i].getAnswers[2]}
”；
ans4.innerHTML=“{qsts[i].getAnswers[3]}
”；
}

变量i在函数外部初始化，问题在于{%set i=i+1%}，它只工作一次，然后停止增加值i

我还尝试使用javascript变量代替twig变量，但我无法将其传递给twig数组

那么如何正确地做这样的事情呢？学习前端框架能防止这种困难吗

---

谢谢。

将您的

twig

变量转换为javascript变量。twig内容在服务器端呈现，而不是像您在这里所假设的那样在客户端呈现。这意味着此类代码将始终显示相同的问题和答案（实际上，客户端没有其他问题/答案与此代码一起提供）。如果您想在客户端的问题和答案之间切换，则需要将所有问题和答案存储在javascript或html中，然后javascript可以在客户端访问这些问题和答案。