Is there a problem with the array?

<html>

<head>

    <title> Unique Font Switcher </title>

    <script type="text/javascript" language="JavaScript">

        var fontStyles = new Array ( "cooper","Fixedsys","Edwardian Script ITC", "Gill Sans MT", "Kozuka Gothic Pro", "Lucida Sans", "Adobe Gothic Std", "Adobe Naskh", "Algerian","Arial Unicode MS");

        function changeFont()
        {
            head6.style.fontFamily = fontStyles[ Math.floor( Math.random * 10 ) ];
        }
    </script>
</head>

<body>

    <center>
        <h1 onmouseover="changeFont()" onmouseout="changeFont()" id="head6" > Click here to switch fonts </h1>
    </center>

</body>

In an attempt to update the font style upon hovering over or out, using 

head6.style.fontFamily = fontStyles[3]
did not work with the defined array.

javascriptarraysstring

Answer №1

When Math.random is used as a function, it returns NaN because it cannot be converted to a number.

To fix this issue, make sure to call the function correctly:

Math.floor( Math.random() * 10 )

It's worth noting that using 10 in the formula works fine for arrays with exactly 10 elements, but it's recommended to use the actual length of the array instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Establishing the types of object properties prior to performing a destructuring assignment

Consider a scenario where a function is utilized to return an object with property types that can be inferred or explicitly provided: const myFn = (arg: number) => { return { a: 1 + arg, b: 'b' + arg, c: (() => { ...

javascripttypescripttypescript-types

Display a DIV element when a specific date is chosen using bootstrap-datepicker

Looking to incorporate the bootstrap-datepicker plugin using the provided markup... Is there a way to display a DIV element when selecting a specific date and then hide it again when another date is chosen? <head> <script src="https://cdnjs.cl ...

javascriptjquerydatepickerbootstrap-4bootstrap-datepicker

Stack bind error encountered

Has anyone encountered a javascript error that they can't seem to figure out? I'm getting the following error message: $("input[type=text],input[type=password],input[type=checkbox],input[type=radio],select,textarea").bindIntoStack is not a funct ...

javascriptjqueryasp.net

The function is experiencing an error with the conversion of a numeric value to a POSIXct object. The 'origin' parameter must be provided in order for the conversion to

Every day, I am extracting the hours and minutes (1:00, 2:00,..., 13:30,..., 22:30, 24:10) from a string column in a schedule dataframe to determine the initial and final hour. After that, I want to calculate the difference in hours between them. Below is ...

rstringtimedifflubridate

Is there a way to schedule a function to run every 6 hours in node.js based on actual time instead of the device's time?

var currentTime = new Date().getHours(); if(currentTime == 6){ //function Do stuff } if(currentTime == 12){ //function Do stuff } if(currentTime == 18){ //function Do stuff } if(currentTime == 24){ //function ...

javascriptnode.jstime

Using an if statement condition within an ng-repeat in AngularJS

I am currently utilizing the ng-repeat feature in AngularJS <ul> <li ng-repeat="question in questions" class="question list-group-item media"> <span class="question__type">{{ question.question }}</span> <br&g ...

javascriptangularjsangularjs-scopeangularjs-ng-repeatangular-ui

Encountered a problem while attempting to generate JSON data on Spring 3.2, resulting in a "Page not found 404" error

I am currently working on retrieving data from a database using Sprng 3.2 and myBatis with the goal of receiving the data in JSON format. In order to achieve this, I have included jackson-core-asl, jackson-core-lgpl, and jackson-mapper-asl(1.9.13) in the ...

javascriptjsonspring-mvcjacksonmybatis

How can I fix a jQuery datepicker issue when it returns null after

Whenever I try to use JQuery's datapicker with the getDate function, it seems to always return null. My goal is to have two datepickers, where the second datepicker's selected date should be smaller than the first one. The JavaScript file I have ...

javascriptjquerydatepicker

The function Array.Clear() is not functioning properly with the given parameters of name, 0

I am facing an issue with resetting a string array that I have declared as follows: string[] strA9 = new string[64]; Even after using the array, when I try to reset all elements back to null using the code below: Array.Clear(strA9, 0, strA9.Length); It ...

c#arrays

Remove the ng-click event listener from an element using AngularJS dynamically

I have an element with an ng-click event that, when clicked, adds a div which works fine. My goal is to remove the ng-click event after adding the div. One solution is to use ng-if: <div ng-click="addDiv()" ng-if="!divAdded" > ...

javascriptangularjs

The function res.send is unavailable and errors are not being properly managed

I encountered a peculiar error while using my function to create users in my mongoose database. Despite the user being successfully created, I am facing an issue where res.send is not functioning as expected, resulting in no response and instead, an error. ...

javascriptnode.jsrestexpressmongoose

Eliminate a specified value from an array that is nested within an object

I'm currently facing an issue with my code. The data structure I have is as follows; users: [ { name: 'bolu', features: ['Tall'], }, { name: 'cam', features: ['Bearded', &apo ...

javascriptarraysreactjsredux

How to prevent panning on mobile devices in Three.js using Javscript?

Currently working on my 3D project using three.js and everything is running smoothly on my laptop. I'm utilizing OrbitControls for camera movement, but I have disabled right-click panning to only allow camera rotation. However, when testing on a mobil ...

javascriptmobilethree.js

Executing PHP script using AJAX displays an empty outcome

I want to execute a php script through ajax after submitting a form. Here is the form <form id="form" class="form"> <input id="email" type="email" required name="email" placeholder="Email" onchange="myUpdateFunction()" value=""> <te ...

javascriptphpjqueryajaxforms

Navigating to a particular value in Vue: A step-by-step guide

In my Vue application, I have a basic table structure: <tbody> <tr v-for="(item, index) in items"> <td> ... </td> </tr> </tbody> The items are dynamically added using the unsh ...

javascriptjqueryscrollvue.jsvuejs2

I'm looking to transfer my stringified object into the HTML body. How can I achieve

When sending an HTML file to a client using the res.write() method, I also need to include an object within the HTML. However, when I stringify the object and add it along with the HTML, the JSON object ends up outside of the HTML structure. I require the ...

javascripthtmlnode.jsjsonexpress

Running commands in brunch

I'm a beginner when it comes to brunch, and I seem to be facing some issues with setting it up correctly. I am using the dead simple skeleton, and I have included a script (main.js) in the app > scripts directory. The script simply contains a conso ...

javascriptcompilationnpmbrunch

Tips for transforming a 2D path into a 3D form using Three.js

Can anyone help me achieve a 3D effect similar to this: http://jsfiddle.net/dAdKm/ I've tried using the following code: var shape = new THREE.Shape(); shape.moveTo(20,20); shape.bezierCurveTo(20, 100, 150, 100, 150, 20); shape.moveTo(20,20); shape ...

javascriptthree.jswebgl

Table cell smaller than div

I want to maintain the size of a table cell while having a larger div float over it. Is there a way to manipulate CSS and elements to achieve this without resizing the table cell? ...

javascriptcsshtml-tablecss-tables

In the world of node.js, functions almost always have a tendency to

As a beginner in the world of nodejs, I am diving into various guides and screencasts to grasp the basics. One aspect that has caught my attention is the handling of async/sync operations, reading files, and understanding how nodejs deals with callbacks/re ...

javascriptnode.js