How to turn the elements in a div into an array with js/jQuery-CodePudding

I'm trying to make a list of buttons and their names into an array in javascript? I heave searched the internet for help but not found anything so far. The div with the name "apps" is where I'm trying to grab from and the array inside of the if statement in the javascript code is what I'm to to replace with the array.

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="clicker.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <title>Vairoon's clicker</title>
</head>
<body>
    <button onclick="smnPlayer()">Get new player</button>
    <p>Players per click: <span id="PPC">1</span></p>
    <p>Players: <span id="players">0</span></p>
    <p>New players per second: <span id="PPS">0</span></p>
    <div >
        <p>Upgrade your clicker game: <span id="upgCost">400</span></p>
        <button id="upgrade">Upgrade clicker</button>
    </div>
    <div id="apps" name="apps"> <!-- The div I'm trying to grab from-->
    <button>Obj1</button>
    <button>Obj2</button>
    </div>
    <script ="clicker.js"></script>
</body>
</html>

Javascript code:

var players=0;
var PPS=0;
var PPC=1;
var upgradeCost=400;
var apps = ["New buildings","More upgrades","Adverts","More minigames"]
var basecosts = [0,20,100,1500,15000]
function getEl(elID) {
    return document.getElementById(elID);
}
function smnPlayer() {
    players =PPC;
    document.getElementById("players").innerHTML=players;
}
getEl("upgrade").onclick = function upgrade() {
    if (players>=upgradeCost) {
        players-=upgradeCost;
        upgradeCost=upgradeCost*3;
        PPC=Math.ceil(PPC*2);
        PPS=PPS*2;
        getEl("players").innerHTML=players;
        getEl("upgCost").innerHTML=upgradeCost;
        getEl("PPC").innerHTML=PPC;
        getEl("PPS").innerHTML=PPS;
    }
}
setInterval(() => {
    if (players>=upgradeCost) {
        getEl("upgrade").style.display="block";
    } else {
        getEl("upgrade").style.display="none";
    }
    for (let index = document.querySelectorAll('#apps').length; index < basecosts.length 1; index  ) {
        if (players>=basecosts[index]) {
            if (array.includes(apps[index])){}else{ //the "array" is what to replace with the array
                var button = document.createElement("BUTTON");
                button.innerHTML = apps[index];
                document.getElementById("apps").appendChild(button);
            }
        }
    }
    
},10)

If you still don't understand what I'm trying to do, here's another explanation: I want the code to go from

<div>
 <button>Obj1</button>
 <button>Obj2</button>
</div>

["Obj1","Obj2"]

Oh and a question if you can answer too, how do I add break line between the items I'm creating just with js?

CodePudding user response：

For your simplified example:

myArray = Array.from(document.querySelectorAll("div button")).map(
  function(b) {
    return b.innerText;
  }
);
console.log(myArray);

//add a line break:
document.querySelector("div").insertBefore(document.createElement("br"),document.querySelectorAll("div button")[1]);

<div>
 <button>Obj1</button>
 <button>Obj2</button>
</div>