我的基本问题是如何访问对象列表中单个 object 的属性或方法？

Question

I am creating an interactive Maths quiz with 9 triangles generated as objects. The user selects a triangle from a drop-down list and its image and dimensions appear and a variable (thisOne) is set as the number of the triangle (1 to 9).

The user inputs their answer (the area of the triangle).

I would have thought that I could generate the correct answer with something like this

correctAnswer = ("triangle_"+ thisOne).triArea()

but it doesn't work.

My basic question is how do I access the properties or methods of an individual object in a list of objects?

Any help appreciated

<!--   ---------------- Triangle object ----------------- -->
function Triangle(triSrc, triName, triBase, triHeight, triUnits){
    this.triSrc = triSrc;
    this.triName = triName;
    this.triBase = triBase; 
    this.triHeight = triHeight;
    this.triArea = function(){
        return triBase * triHeight /2
       };
    this.triUnits = triUnits;
}

var triangle_1 = new Triangle('tri_q_area_1','right angle triangle',34,20,'m2');
var triangle_2 = new Triangle('img/tri_q_area_2.png','right angle triangle',16,16,'cm2');
var triangle_3 = new Triangle('img/tri_q_area_3.png','right angle triangle',15,8,'km2');
var triangle_4 = new Triangle('img/tri_q_area_4.png','right angle triangle',15,9,'cm2');
var triangle_5 = new Triangle('img/tri_q_area_5.png','scalene', 20,12,'cm2');
var triangle_6 = new Triangle('img/tri_q_area_6.png','scalene', 200,130,'cm2');
var triangle_7 = new Triangle('img/tri_q_area_7.png','scalene', 20,16,'m2');
var triangle_8 = new Triangle('img/tri_q_area_8.png','scalene', 28,16,'km2');
var triangle_9 = new Triangle('img/tri_q_area_9.png','scalene', 54,38,'yards2');

Answer 1

are you ok with have a list?

<!--   ---------------- Triangle object ----------------- -->
function Triangle(triSrc, triName, triBase, triHeight, triUnits){
    this.triSrc = triSrc;
    this.triName = triName;
    this.triBase = triBase; 
    this.triHeight = triHeight;
    this.triArea = function(){
        return triBase * triHeight /2
    };
    this.triUnits = triUnits;
}

var triangles [
    new Triangle('tri_q_area_1','right angle triangle',34,20,'m2'),
    new Triangle('img/tri_q_area_2.png','right angle triangle',16,16,'cm2'),
    new Triangle('img/tri_q_area_3.png','right angle triangle',15,8,'km2'),
    new Triangle('img/tri_q_area_4.png','right angle triangle',15,9,'cm2'),
    new Triangle('img/tri_q_area_5.png','scalene', 20,12,'cm2'),
    new Triangle('img/tri_q_area_6.png','scalene', 200,130,'cm2'),
    new Triangle('img/tri_q_area_7.png','scalene', 20,16,'m2'),
    new Triangle('img/tri_q_area_8.png','scalene', 28,16,'km2'),
    new Triangle('img/tri_q_area_9.png','scalene', 54,38,'yards2')
];

and then do triangles[thisOne].triArea()

Answer 2

You should use an array for this sort of thing. Here's an example:

<!--   ---------------- Triangle object ----------------- -->
function Triangle(triSrc, triName, triBase, triHeight, triUnits){
    this.triSrc = triSrc;
    this.triName = triName;
    this.triBase = triBase; 
    this.triHeight = triHeight;
    this.triArea = function(){
        return triBase * triHeight /2
       };
    this.triUnits = triUnits;
}
var triangle = []; // declare the array;
// note that i'm skipping index 0 to keep with your sample, that is not normally a smart thing to do!
// assign to indices of the array, no need to declare individual elements.
triangle[1] = new Triangle('tri_q_area_1','right angle triangle',34,20,'m2');
triangle[2] = new Triangle('img/tri_q_area_2.png','right angle triangle',16,16,'cm2');
triangle[3] = new Triangle('img/tri_q_area_3.png','right angle triangle',15,8,'km2');
triangle[4] = new Triangle('img/tri_q_area_4.png','right angle triangle',15,9,'cm2');
triangle[5] = new Triangle('img/tri_q_area_5.png','scalene', 20,12,'cm2');
triangle[6] = new Triangle('img/tri_q_area_6.png','scalene', 200,130,'cm2');
triangle[7] = new Triangle('img/tri_q_area_7.png','scalene', 20,16,'m2');
triangle[8] = new Triangle('img/tri_q_area_8.png','scalene', 28,16,'km2');
triangle[9] = new Triangle('img/tri_q_area_9.png','scalene', 54,38,'yards2');

// now you only need the index to address a specific element:
var correctIndex = 4;
var correctAnswer = triangle[correctIndex];

// visualize it in the console
console.log(correctAnswer);