Получение «неопределенного» в браузере при попытке перенести текст в шаблон HTML через JS и Jquery
STORE.question является массивом, поэтому вы должны указать, к какому элементу этого массива вы хотите получить доступ / визуализировать:
function renderQuestion() { let question = STORE.question[0]; const questionTemplate = $( ` {amp}lt;div class="container"{amp}gt; {amp}lt;p{amp}gt;${question.questionText}{amp}lt;br{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;form{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.responses}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.questionOne}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.question} {amp}lt;/form{amp}gt; {amp}lt;button{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt;`); $("main").html(questionTemplate); }
Это всегда будет выбирать первый элемент в массиве, который не имеет особого смысла (imho). Для этого я бы изменил работу renderQuestion и ввел параметр, который будет представлять вопрос:
function renderQuestion(question) { const questionTemplate = $( ` {amp}lt;div class="container"{amp}gt; {amp}lt;p{amp}gt;${question.questionText}{amp}lt;br{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;form{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.responses}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.questionOne}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.question} {amp}lt;/form{amp}gt; {amp}lt;button{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt;`); $("main").html(questionTemplate); } renderQuestion(STORE.question[0]);
С этим изменением вы можете определить, какой вопрос массива будет добавлен в DOM.
Я также изменил бы имя свойства question с единственного числа на множественное, чтобы оно лучше отражало тот факт, что в массиве может быть / будет более одного вопроса.
store.js
const STORE = { questions: [ { questionText: "This is the first question", responses: [ "First response", "second response", "third response" ], answer: "first response" }, { questionText: "This is the second question", responses: [ "First response", "second response", "third response" ], answer: "second response" } ] }
index.js
function renderQuestion(question) { const questionTemplate = $( ` {amp}lt;div class="container"{amp}gt; {amp}lt;p{amp}gt;${question.questionText}{amp}lt;br{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;form{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.responses}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.questionOne}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.question} {amp}lt;/form{amp}gt; {amp}lt;button{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt;`); $("main").html(questionTemplate); }
С этими изменениями вы сможете, например, поставить один конкретный вопрос с помощью:
renderQuestion(STORE.questions[index]);
const STORE = { questions: [ { questionText: "This is the first question", responses: [ "First response", "second response", "third response"], answer: "first response" }, { questionText: "This is the second question", responses: [ "First response", "second response", "third response"], answer: "second response" } ] } function renderQuestion(question) { const questionTemplate = $( ` {amp}lt;div class="container"{amp}gt; {amp}lt;p{amp}gt;${question.questionText}{amp}lt;br{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;form{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.responses}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.questionOne}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.question} {amp}lt;/form{amp}gt; {amp}lt;button{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt;`); $("#main").html(questionTemplate); } renderQuestion(STORE.questions[1]);
{amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="main"{amp}gt;{amp}lt;/div{amp}gt;
Или (если вы замените .html() на .append() ), чтобы распечатать все вопросы из магазина с
STORE.questions.forEach(renderQuestion);
const STORE = { questions: [ { questionText: "This is the first question", responses: [ "First response", "second response", "third response"], answer: "first response" }, { questionText: "This is the second question", responses: [ "First response", "second response", "third response"], answer: "second response" } ] } function renderQuestion(question) { const questionTemplate = $( ` {amp}lt;div class="container"{amp}gt; {amp}lt;p{amp}gt;${question.questionText}{amp}lt;br{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;form{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.responses}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.questionOne}{amp}lt;br{amp}gt; {amp}lt;input type="radio"{amp}gt;${question.question} {amp}lt;/form{amp}gt; {amp}lt;button{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt;`); $("#main").append(questionTemplate); } STORE.questions.forEach(renderQuestion);
{amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="main"{amp}gt;{amp}lt;/div{amp}gt;