0

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 class="upgrade">
        <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>

to

["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?

6
  • 1
    You're only ever going to have one "apps" <div>, so the .length of the list returned by .querySelectorAll() will always be 1.
    – Pointy
    Apr 19, 2022 at 17:00
  • What is your array supposed to be? It's not clear here. Your question makes it sound like you want it to be based on #app's children, but there are none and you don't seem to be adding any.
    – mykaf
    Apr 19, 2022 at 17:05
  • I'm not talking about getting the divs, I'm talking about the buttons to be in the div
    – user18806785
    Apr 19, 2022 at 17:05
  • @user1599011 You are right but the code adds items into it later on.
    – user18806785
    Apr 19, 2022 at 17:06
  • Then you need to include that so we can see the entire picture. How to create a Minimal, Reproducible Example
    – mykaf
    Apr 19, 2022 at 17:08

1 Answer 1

0

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>

1
  • Thank you a lot!
    – user18806785
    Apr 19, 2022 at 17:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy