javascript — получение «неопределенного» в браузере при попытке перенести текст в HTML-шаблон с помощью JS и Jquery

Получение «неопределенного» в браузере при попытке перенести текст в шаблон 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; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector