How do I count how many arrays there is - what do I add to the code? I have managed to create 2 buttons and the top button works and changes the fruits into alphabetical order but the second button doesn't work - please help!

<!DOCTYPE html>
<html>
<body>

<h4>Press the button to change the fruits into alphabetical orders.</h4>

<button onclick="myFunction()">Click here to arrange the fruits into alphabetical order</button>

<p id="demo"></p>

<h4>Press the second button to find out how many array's there is.</h4>

<button onclick="myFunction1()">Click here to see there number of arrays.</button>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}

</script>

</body>
</html>

Many thanks

To count the number of arrays in JavaScript, you can use the `length` property of the array. In your code, you can define a function called `myFunction1` to count the number of arrays and update the result in the HTML element.

Here's an updated version of your code with the implementation of `myFunction1()`:

```html
<!DOCTYPE html>
<html>
<body>

<h4>Press the button to change the fruits into alphabetical order.</h4>

<button onclick="myFunction()">Click here to arrange the fruits into alphabetical order</button>

<p id="demo"></p>

<h4>Press the second button to find out how many arrays there are.</h4>

<button onclick="myFunction1()">Click here to see the number of arrays</button>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}

function myFunction1() {
var count = 1; // Assuming the initial array is already there
var elements = document.getElementsByTagName("script");
for (var i = 0; i < elements.length; i++) {
if (elements[i].innerHTML.includes("var fruits = [")) {
count++;
}
}
document.getElementById("demo").innerHTML = "Number of arrays: " + count;
}

</script>

</body>
</html>
```

In the `myFunction1()` function, we initialize the count to `1` assuming the initial array is already there. We then retrieve all the `<script>` elements using `getElementsByTagName("script")`. We iterate through these elements, searching for the script that contains the array declaration (`var fruits = [`) and increment the count if found.

Finally, we update the text of the `demo` element to display the number of arrays.

Hope this helps! Let me know if you have any further questions.

To count the number of arrays, you can add a new function called `myFunction1` to your JavaScript code. Update your code as follows:

```javascript
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
fruits.sort();
document.getElementById("demo").innerHTML = fruits;
}

function myFunction1() {
var numArrays = 1; // Start with 1 array (fruits)
numArrays += fruits.length; // Add the number of elements in the fruits array
document.getElementById("demo").innerHTML = "Number of arrays: " + numArrays;
}
```

This new function `myFunction1` will calculate the number of arrays by adding 1 (for the "fruits" array) to the length of the "fruits" array. It will then display the result in the `demo` paragraph.