Help with saving input text to file

JavaScript
1

Hello all,
I am new to javascript and I am trying to create an html form that outputs an html file. I have a number of text inputs on the page with a button to both store those inputs in a variable then save the data using a blob. Here is the code I have.

Button code
<button onclick="myFunction()" class="button" id="save-btn">SUBMIT/UPDATE</button>

And the script that follows it (inside the html tags for the page)

function getTheData() {

    var players = document.getElementsByClassName("player");

    var inputValues = new Array();



    for (i in players) {


        var singleVal = players[i].value;

        if (singleVal !== "" && singleVal !== undefined) {

            inputValues.push(singleVal);

        }

    };


function giveTheData() {	

	var blob = new Blob([players], {type: "text/html"});

	saveAs(blob, "players.html");

	};


function myFunction(){

    getTheData();

    giveTheData();

};

};

The chrome java console error flashes by too fast for me to see what is wrong. I can not use any server side stuff like php. It has to be client side.

Any help would be appreciated

2

‘players’ vs ‘player’ vs ‘dancers’? Unless ‘players’ comes from somewhere else, I think you mean ‘dancers’. There is definitely no ‘player’ to get a singleVal from.

3

Thank you mcalex. That dancers should definitely not be there. I have edited the post.
I wanted to take the values from the text inputs, that have a class name of player, and store them in an array or variable called players. Then save that as players.html.

I did figure out how to log the have console so I do get the following error:

Uncaught ReferenceError: player is not defined
at getTheData (index.html:50)
at myFunction (index.html:39)
at HTMLButtonElement.onclick (index.html:34)

I thought the the singleVal variable defined player

4

I’m guessing line 50 is: var singleVal = player[i].value;
This line means: "create a variable ‘singleVal’ from the item at index ‘i’ in the collection (array) of ‘player’ ".

When you read that last sentence you’ll probably get it, but more formally: ‘player’ is not defined - because you defined an array called ‘players’.

hth

5

Thank you again! That cleared up the variable error. I have updated the original post.
Now I get the following:
Uncaught ReferenceError: myFunction is not defined
at HTMLButtonElement.onclick

Uncaught ReferenceError: giveTheData is not defined at myFunction

6

Check your curly braces. You’re defining giveTheData() and myFunction() inside getTheData.

Also, using var is discouraged and easier to get into trouble with than using the newer let and const. If you aren’t going to be reassigning where a variable points, make it const. If you are, use let. Their scope is more easily controlled than var declarations which can leak out in unexpected ways.

7

Thank you InternetFriend.
I now have the functions separated.

function myFunction(){
    getTheData();
    giveTheData();
};

function getTheData() {
    var players = document.getElementsByClassName("player");
    var inputValues = new Array();


    for (i in players) {
        
        var singleVal = players[i].value;
        if (singleVal !== "" && singleVal !== undefined) {
            inputValues.push(singleVal);
        }
    };

};
	
function giveTheData() {	
	var blob = new Blob([players], {type: "text/html"});
	saveAs(blob, "players.html");
};

And I get Uncaught RefernceError: players is not defined
and it points to the giveTheData, myFunction, and the button onclick.