Declaring Javascript array within a function

Question

Declaring an array within a function triggered by button causes the function to fail and not work as intended. What is the reason this happens? The "function C" block is having the problem.

I have also noticed that the ES6 syntax of "export ..." causes the entire thing to jam as well, it only accepts "module.export".

I am a total beginner, so I have no idea of what is going on.

This is my code:

<!-- Bootstrap CSS -->
<link href="resources/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="resources/custom2.css">
<link href="resources/TCJA's CSS.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  let TA = [0, 0, 0, 0]

  function MF() {
    TA = [0, document.getElementById("test1").value, document.getElementById("test2").value, document.getElementById("test3").value]
    document.getElementById("shout1").innerHTML = TA[1]
    document.getElementById("shout2").innerHTML = TA[2]
    document.getElementById("shout3").innerHTML = document.getElementById("testCheck").checked
  }

  function C() {
    var ACArray[0] = 2; //AttackerCard Array
    var DCArray[0] = 1; //DefenderCard Array
    var para = document.createElement("p");
    var node = document.createTextNode("The attackers dealt " + document.getElementById("wand").value + " damage to the defenders.");
    para.appendChild(node);

    var element = document.getElementById("newElement");
    element.appendChild(para);
  }
</script>

</head>

<body>
  <!-- Put code below -->
  <br>
  <label class="control-label">Tester Input</label>
  <input class="form" id="test1">
  <input class="form" id="test2">
  <input class="form" id="test3">
  <br>
  <button id="doge" class="btn btn-primary" onclick="MF()"><h3>Result</h3></button>
  <br>
  <input id="testCheck" type="checkbox"> Check it?
  <br>
  <h2>Result:</h2>
  <p id="shout1">Hello?</p>
  <p id="shout2">Hello again?</p>
  <p id="shout3">Hello a third time?</p>
  <br>
  <label class="control-label">Creator Input</label>
  <input class="form" id="wand">
  <button id="god" class="btn btn-success" onclick="C()"><h3>Create</h3></button>
  <br>
  <div id=newElement>

  </div>

  <button id="show">Show</button>
  <!-- JQuery -->

  <!-- End of body -->
</body>

</html>

var ACArray[0]=2 and var DCArray[0]=1 are syntactically invalid ~ "Unexpected token [" — Phil
– Phil, Commented Jul 26, 2018 at 6:03
To add to what Phil said, you can declare those array variables separately, var ACArray = []; var DCArray = [], and then modify their first elements, ACArray[0] = 2; DCArray[0] = 1; — Nisarg Shah
– Nisarg Shah, Commented Jul 26, 2018 at 6:05

Yurii N. · Accepted Answer · 2018-07-26 07:34:48Z

2

What do you mean, by declaring var ACArray[0]=2;? Yes, it looks like declaring new array with first element equals 2, but, where is your array declaration?

The right way to do this: var ACArray = [2]; var DCArray = [1]; and so on.

edited Jul 26, 2018 at 7:34

answered Jul 26, 2018 at 6:14

Yurii N.

5,72112 gold badges45 silver badges67 bronze badges

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

Comments

Dananjaya Ariyasena · Accepted Answer · 2018-07-26 06:08:49Z

1

Declare arrays Before assigning values into an array.

var ACArray = [];
var DCArray = [];

function C(){
   ACArray[0] = 2;
   DCArray[0] = 1;
}

answered Jul 26, 2018 at 6:08

Dananjaya Ariyasena

6063 silver badges16 bronze badges

Comments

Willem van der Veen · Accepted Answer · 2018-07-26 07:18:21Z

The following syntax is incorrect:

var ACArray[0]=2; //AttackerCard Array
var DCArray[0]=1; //DefenderCard Array

The most convenient way to declare an array in JS is an Array literal like this:

var array = ['item1', 'item2'];

What we now have done is multiple steps in one. First we have created memory for an array using the var keyword and the array literal syntax.

Step 1:

var array = [];

Then we have initialized the array and put actual values inside the array like this:

Step 2

array[0] = 'item1';
array[1] = 'item2';

Important to understand is that you now can refer to all these elements in the following way:

console.log(array[0]);  // logs item1
console.log(array[1]);  // logs item2

And also be aware that the counting of the elements in the array starts with 0, not 1.

Collectives™ on Stack Overflow

Declaring Javascript array within a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related