How do I return the values of a function in an event listener?

[kernix]

I have a form with 6 inputs of type number and an input type of submit. I have an event listener with an anonymous function that calls a named function.

In the named function I’m getting the input values, pushing them to an empty array, then converting them to text, and finally pushing only the unique text values to another empty array.

FYI, the numbers are guitar fret numbers and the text that I’m converting are the notes that correspond to the frets numbers. Everything looks good when I log to the console but I don’t know how to access the note values. I’m returning the array I want (uniqueNotes) but I don’t know how to access the values for other functions.

I assume this is something basic that I am missing. This is a project that I want to add to my portfolio page, so I’d appreciate some help with this one. Here is a screenshot of the console:

Here is the JS:

const firstNote = document.getElementById('note1');
const secondNote = document.getElementById('note2') ;
const thirdNote = document.getElementById('note3');
const fourthNote = document.getElementById('note4');
const fifthNote = document.getElementById('note5');
const sixthNote = document.getElementById('note6');

const notesForm = document.getElementById('notes-form');

let userNotes = [];
let chordNotes = [];

notesForm.addEventListener("submit", function(e) {
  getNotes();
  e.preventDefault(); 
});

// Get the fret #'s entered by the user and convert into chromatic notes
function getNotes() {
  let userNotes = [firstNote.value, secondNote.value, thirdNote.value, fourthNote.value, fifthNote.value, sixthNote.value];

  if ([...userNotes]) {

    chordNotes.push(stringLoE[userNotes[0]], stringA[userNotes[1]], stringD[userNotes[2]], stringG[userNotes[3]], stringB[userNotes[4]], stringHiE[userNotes[5]]);

    let uniqueNotes = [];

    for (let i = 0; i < chordNotes.length; i++) {
      if (!uniqueNotes.includes(chordNotes[i]) && chordNotes[i] !== undefined) {
      uniqueNotes.push(chordNotes[i]);
      }
    }

    console.log(userNotes);
    console.log(uniqueNotes);
    // Console log for the one input field with no value entered
    console.log("Empty input box (typeof): " + typeof userNotes[4])

    return uniqueNotes;
  }
}

// Why can't I get the return values from getNotes()?
function testingReturn() {
  console.log(getNotes);
}

[nhcarrigan]

console.log(getNotes) is logging the function itself, not the return value.

Your getNotes isn’t running there because it’s not being called.

[kernix]

I wasn’t sure if I should include () or not because I don’t console log functions that often, so I tried it both ways - it didn’t work with:

function testingReturn() {
  console.log(getNotes());
}

[colinthornton]

@kernix

it didn’t work with:

function testingReturn() {
  console.log(getNotes());
}

It didn’t work how? What was the output?

---

@kernix

if ([...userNotes])

This is always true as long is userNotes is defined, maybe you want userNotes.length, or more explicitly userNotes.length > 0

---

@kernix

chordNotes.push(stringLoE[userNotes[0]],

Where are these stringXXX variables being defined?

---

Sorry, I don’t see the exact issue yet so… just kind of pointing things out.

For a more complex problem like this it would be extremely helpful if you could post a minimal reproduction on Codepen or something.

[kernix]

Here is the codepen link: https://codepen.io/jim-kernicky/pen/zYPvxda

First off, I totally forgot to call testingReturn(). As soon as I did I got the error I’m familiar with:

Uncaught ReferenceError: Cannot access…

I think I need to use async/await somewhere because initially, the array is empty. Or can I remove items from the front of the array as I push items on? I guess I’m going to have to look into async because I’m going to need it for the tough parts of this project.

[colinthornton]

Async/await are specifically for handling promises, of which you have none, so I think that’s the wrong path.

// search: javascript how to empty an array before pushing to it

You can reinitialize the variable to an empty array first.

[kernix]

So start with values in the array in the global scope, but then in the function set it to an empty array before pushing to it? I think I tried that and it didn’t work.

I will be using a JSON file (I think). Getting the notes is the easy part. I either need a number of JSON files or a boatload of logic - but I’ll cross that bridge when I get there.

[kernix]

I added:

// this line:
userNotes = [];

chordNotes.push(stringLoE[userNotes[0]], stringA[userNotes[1]], stringD[userNotes[2]], stringG[userNotes[3]], stringB[userNotes[4]], stringHiE[userNotes[5]]);

And I’m getting this error:

script.js:26 Uncaught ReferenceError: Cannot access 'stringLoE' before initialization
    at getNotes (script.js:26:21)
    at testingReturn (script.js:47:15)
    at script.js:50:1

It’s getting late and I have to get up early to shovel some snow - thanks for the help!