Cody Cody - 3 months ago 7
Javascript Question

How to return individual array items from a constructor function

The issue I’m trying to figure out is how to either print the array of options to my HTML as a set or radio buttons; or pass each item from the array

a_options[ ]
individually to radio buttons already present in the HTML.

I understand that
answer1.display(a_option[0]);
yields nothing because
a_option[ ]
is not a variable defined in display.

Any ideas on how to do this or is it possible?

Thanks for the tips and ideas!

// My constructor function & class 'Questions'
var Questions = function(q_text)
{
this.q_text = q_text;
};

// My function for displaying the key-value pair 'q_text' in 'Questions' class.
Questions.prototype.displayQ = function()
{
return this.q_text;
};

// My newObj created from class 'Questions'.
var question1 = new Questions("Who is the winningest coach at KU?");
// question1 has taken on the protoype of 'q_text'
// Displays the key-value pair 'q_text' where 'q_text' has taken on the value
// passed through the constructor function 'Questions'.
question1.displayQ();



//#######################



// My constructor function & class 'Answers'
var Answers = function(a_options, a_facts, a_img, answer)
{
this.a_options = a_options;
this.a_facts = a_facts;
this.a_img = a_img;
this.answer = answer;
};

// My function for displaying the key-value pair 'a_options' in 'Answers' class.
Answers.prototype.displayA = function()
{
return this.a_options;
// return this.a_facts;
// return this.a_img;
// return this.answer;
};

// My newObj created from class 'Answers'
var answer1 = new Answers(['Bill Self', 'Phog Allen', 'Larry Brown', 'James Naismith', 'Roy Williams'], "Bill Self is 372-82 (.822) during his 14 years at the helm of Kansas.", "img/self.jpg", "Bill Self");
// question1 has taken on the protoype of 'a_options'
// Displays the key-value pair 'a_options' where 'a_options' has taken on the value
// passed through the constructor function 'Answers'.
answer1.displayA();

Answer

The issue I’m trying to figure out is how to either print the array of options to my HTML as a set or radio buttons;...

Your displayA method of the Answers constructor function is returning the answers as an array, so after calling displayA you could just loop through the array and create your radio button elements inside the loop and add them to an element, for example.

var answers = answer1.displayA();
var answersLen = answers.length
for(var i = 0; i < answersLen; i++) {
  var elem = document.createElement('input');
  elem.type = "radio";
  elem.name = "option";
  elem.value = answers[i];
  elem.id = answers[i];
  document.body.appendChild(elem);
}

A suggestion would be to change the name of displayA to maybe getOptions, since displayA is not displaying anything and the answers are actually options, since there is only one correct answer to the question if i am not mistaken.

You could as well use the Array.prototype.forEach() method to loop through the array and create your radio input elements.

answer1.displayA().forEach(function(o) {
  var option = '<br /><input type="radio" name="option" value="'+o+'" id="'+o+'" />'
  + '<lable for"'+o+'">'+o+'</label>';
  document.body.innerHTML += option;
})  

Another option would be to actually render everything inside the displayA method right away and maybe add a form element or pass an element to the method as a container to append your elements to. Maybe like so.

Answers.prototype.displayA = function(context, formId) {
  var form = document.createElement('form');
  var facts = document.createElement('p');
  var img = document.createElement('img');

  form.id = formId;
  facts.textContent = this.a_facts;
  img.src =  this.a_img
  form.appendChild(facts);
  form.appendChild(img);

  this.a_options.forEach(function(s) {
    var elem = '<br /><input type="radio" name="option" value="'+s+'" id="'+s+'" />'
    + '<lable for"'+s+'">'+s+'</label>';
    form.innerHTML += elem;
  });

  context.appendChild(form);
};

Then you would want to call displayA like so

answer1.displayA(document.body, "first-question");

You could of course pass any element to displayA it would not have to be the body.

I am sure you'll get the idea.

Comments