Returning a value from an array in javascript

Question

I hope you can help, I am trying to build a questionnaire that has different weighted answer scores. The idea being that when the submit button is pressed then a percentage scores is returned.

I have found an online tutorial that gave me a template of what I needed to do, in the tutorial version each value of the array was checked and predetermined value was added to the score, in my scenario I am looking to add the corresponding value from array to the score if found to be true.

Each radio question answer value is stored in an array,

const auditCorrectAnswers = ['1', '20', '20', '20', '20', '20', '20', '20', '20', '20', '5', '5', '5', '10', '5', '5', '20', '20'];

and when the if statement is true I am trying to extract the value from the array at the same position the forEach() loop is checking.

I thought had managed to do this using, the following statement

userAuditAnswers.forEach((auditAnswer, index) => {
    if(auditAnswer === auditCorrectAnswers[index]){    

        auditScore += (auditCorrectAnswers, index);

    }
});

console.log(auditScore);

but returns the total index position values together, as it should give an answer of 256, but is the nearest I have gotten to a solution.

I have tried the valueOf(), values() and map() but these all give a repeated string of all the values in the array.

I am sure it quite simple but have been stuck on this for a couple of days and have run out of ideas, so any help would be greatly appreciated.

This is my code:

const auditCorrectAnswers = ['1', '20', '20', '20', '20', '20', '20', '20', '20', '20', '5', '5', '5', '10', '5', '5', '20', '20'];

const form = document.querySelector('.venueAudit-form');

form.addEventListener('submit', e => {
    e.preventDefault();

    let auditScore = 0;
    
    //takes the value from each radio button
    const userAuditAnswers = [form.a1.value, form.a2.value, form.a3.value, form.a4.value, form.a5.value, form.a6.value, form.a7.value, form.a8.value, form.a9.value, form.a10.value, form.a11.value, form.a12.value, form.a13.value, form.a14.value, form.a15.value, form.a16.value, form.a17.value, form.a18.value]; 
    
    // checks management audit scores
    userAuditAnswers.forEach((auditAnswer, index) => {
        if(auditAnswer === auditCorrectAnswers[index]){    

            auditScore += (auditCorrectAnswers, index);
        }
    });
    
    console.log(auditScore);
});

html part

<form>            
<!-- Managers Office -->
            <div class="light-blue lighten-5">
            <div class="container p-t-2 p-l-2 p-r-2 p-b-20">
                <h5>Managers Office</h5>
            </div>
            
            <div class="container p-t-2 p-l-2 p-r-2 p-b-5">
                    <p class="text2">Clean & Tidy</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a1" value="1" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a1" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">All files up to date</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a2" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a2" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Licensing folder complete & up-to-date</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a3" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a3" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Fire folder complete & up to date</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a4" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a4" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Health & Safety folder complete up to date</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a5" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a5" value="0"/><span>No</span>
                            </label>
                        </div>
                    
                    <p class="text2">Security folder complete & up to date</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a6" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a6" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Pre-Brief/Debrief</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a7" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a7" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Float Check</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a8" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a8" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">CCTV 31 days recording</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a9" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a9" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">All cameras working & burning correctly</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a10" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a10" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Float Check record</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a11" value="5" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a11" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Computers working</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a12" value="5" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a12" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Radios Charging</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a13" value="0" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a13" value="5"/><span>No</span>
                            </label>
                        </div>
                    <p class="text2">Homebase software completed</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a14" value="10" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a14" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Safe protocol</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a15" value="5" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a15" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">No broken PDQ machines</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a16" value="5" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a16" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Body camera footage saved to drive (Incidents)</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a17" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a17" value="0"/><span>No</span>
                            </label>
                        </div>
                    <p class="text1">Incident reports completed correctly</p>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a18" value="20" checked/><span>Yes</span>
                            </label>
                        </div>
                        <div>
                            <label>
                                <input class="with-gap" type="radio" name="a18" value="0"/><span>No</span>
                            </label>
                        </div>                  
                </div>
            </div>  
            <!-- end of section -->
        <!-- bottom of coloured background block -->  
        </div>
        
        <!-- blank column  -->
        <div class="col s1"></div>
    </div>
    
    <div class="row">
        <!-- blank column -->
        <div class="col s4"></div>
        <div class="col s4 center-align">
            <button class="btn brand waves-effect waves-light" type="submit" name="submit">Submit<i class="material-icons right">send</i></button>
        </div>
        <!-- blank column -->
        <div class="col s4"></div>

    </div>
 </form>

Are auditCorrectAnswers the correct answers or the score value of each answer? — ibrahim mahrir
– ibrahim mahrir, Commented Jun 22, 2020 at 12:07
Can you also post a portion of the html code? Just the html of one or two questions in the form — ibrahim mahrir
– ibrahim mahrir, Commented Jun 22, 2020 at 12:07
auditScore += (auditCorrectAnswers, index); what meant to do (auditCorrectAnswers, index);? — Mosh Feu
– Mosh Feu, Commented Jun 22, 2020 at 12:09
auditCorrectAnswers are both, the correct answer and the value of each I want to return to add to auditScore — Matthew
– Matthew, Commented Jun 22, 2020 at 12:43

iAmOren · Accepted Answer · 2020-06-22 12:11:10Z

2

How about making an array of objects?

item={correctAnswer:"some answer", points:someNumber}

Then:

var auditScore=0;
for(var answerIndex=0; answerIndex<userAuditAnswers.length; answerIndex++)
  if(userAuditAnswers[answerIndex]==auditCorrectAnswers[index].correctAnswer)
    auditScore+=auditCorrectAnswers[index].points;```

answered Jun 22, 2020 at 12:11

iAmOren

2,8122 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matthew Over a year ago

Thanks for that, I tried this last night but got an error, I think it was because I was using the forEach loop incorrectly.

iAmOren Over a year ago

Did you use array of objects instead of just values?

Matthew Over a year ago

I used the array of objects, which is what I tried doing before I posted but think I had mis-read my text book, after I coded it correctly as above it worked like a charm. will have a go at tidying it up code-wise using forEach() later this week. But i have a working bit code. thanks for the help

Jelle · Accepted Answer · 2020-06-22 12:20:28Z

1

Given the requirements it looks to me you want to check how the sum of one array compares to the sum of another array.

function arraySum(input) {
  return input.reduce((sum, current) => sum + parseInt(current, 10), 0);
}

const auditCorrectAnswers = ['1', '20', '20', '20', '20', '20', '20', '20', '20', '20', '5', '5', '5', '10', '5', '5', '20', '20'];
const sumCorrectAnswers = arraySum(auditCorrectAnswers);

const userAuditAnswers = ['1', '20', '20', '20', '20', '20', '20', '20', '20', '20', '5', '5', '5', '10', '5', '5', '20', '20'];
const sumUserAnswers = arraySum(userAuditAnswers);

console.log(sumCorrectAnswers);
console.log(sumUserAnswers);
console.log(sumUserAnswers === sumCorrectAnswers);

answered Jun 22, 2020 at 12:20

Jelle

2,2161 gold badge14 silver badges17 bronze badges

Comments

Jaya Shankar B · Accepted Answer · 2020-06-22 12:32:35Z

0

the array auditCorrectAnswers you declared is an array of 'strings' so you change it to array od integers and then change this line

auditScore += (auditCorrectAnswers, index);

To

auditScore += auditCorrectAnswers[index];

I think this works

answered Jun 22, 2020 at 12:32

Jaya Shankar B

1332 silver badges9 bronze badges

Collectives™ on Stack Overflow

Returning a value from an array in javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related