How can JavaScript generate arrays filled with randomly generated numbers?

As part of a classroom assignment, I am working on creating a table using only Javascript. The table is set up perfectly, except that every other row displays a random number before moving on to the next row. How can I eliminate this random row?

 var table = ["Name", "Turn Average", "Surface Area", "100% Boosting"];

 var names = ["Octane", "Dominus", "Breakout", "X-Devil", "Batmobile"];

 var turnaverages = [2.18, 2.22, 2.22, 2.21, 2.25];

 var surfacearea = [34495, 34529, 32679, 34242, 34365];

var maxboost = [1.967, 2.031, 2.035, 2.014, 2.10];

function info() {
document.write("<table>"); 
document.write("<tr>"); 

//these lines represent the headings for the columns in the table
document.write("<th>Name</th>");
document.write("<th>Turn Average</th>");
document.write("<th>Surface Area</th>");
document.write("<th>100% Boosting</th>");
document.write("</tr>");

for(var i = 0; i < names.length; i++){
    document.write("<tr>");
        document.write("<td>" + names[i] + "</td>");
        document.write("<td>" + turnaverages[i] + "</td>');
        document.write("<td>" + surfacearea[i] + '</td>');
        document.write('<td>' + maxboost[i] + '</td>');
        document.write('</tr>');
	
	if ( names[i] === "Dominus" ) {
		document.write('<td>' + turnaverages[i] + surfacearea[i] + maxboost[i] + '</td>');
	}
	else if ( names[i] === "Breakout" ){
		document.write('<td>' + turnaverages[i] + surfacearea[i] + maxboost[i] + '</td>');
	}
	else if ( names[i] === "X-Devil" ){
		document.write('<td>' + turnaverages[i] + surfacearea[i] + maxboost[i] + '</td>');
	}
	else if( names[i] === "Batmobile" ){
		document.write('<td>' + turnaverages[i] + surfacearea[i] + maxboost[i] + '</td>');
	}

       document.write('</tr>');
     }
      document.write('</table>');
    }

Answer №1

You currently have

document.write("<td>" + maxboost[i] + "</td>");
document.write("</tr>");

immediately followed by weather tests that try to output td elements, then followed again by another

document.write("</tr>"); //close the table row element

Therefore, you should simply remove the initial </tr>, as you do not want to close the row at this point:

var table = ["Name", "Turn Average", "Surface Area", "100% Boosting"];

var names = ["Octane", "Dominus", "Breakout", "X-Devil", "Batmobile"];

var turnaverages = [2.18, 2.22, 2.22, 2.21, 2.25];

var surfacearea = [34495, 34529, 32679, 34242, 34365];

var maxboost = [1.967, 2.031, 2.035, 2.014, 2.10];

function info() {
  document.write("<table>");
  document.write("<tr>");

  //the following lines generate the table headers (th) for the table 
  document.write("<th>Name</th>");
  document.write("<th>Turn Average</th>");
  document.write("<th>Surface Area</th>");
  document.write("<th>100% Boosting</th>");
  document.write("</tr>"); //closing the first table row
  //loop through the data and populate the table rows with information 
  for (var i = 0; i < names.length; i++) {
    document.write("<tr>"); //creating a new table row
    //outputting each table data tag based on the data
    document.write("<td>" + names[i] + "</td>");
    document.write("<td>" + turnaverages[i] + "</td>");
    document.write("<td>" + surfacearea[i] + "</td>");
    document.write("<td>" + maxboost[i] + "</td>");
    //changing the content displayed based on certain conditions 
    if (names[i] === "Dominus") {
      document.write("<td>" + turnaverages[i] + surfacearea[i] +
        maxboost[i] + "</td>");
    } else if (names[i] === "Breakout") {
      document.write("<td>" + turnaverages[i] + surfacearea[i] +
        maxboost[i] + "</td>");
    } else if (names[i] === "X-Devil") {
      document.write("<td>" + turnaverages[i] + surfacearea[i] +
        maxboost[i] + "</td>");
    } else if (names[i] === "Batmobile") {
      document.write("<td>" + turnaverages[i] + surfacearea[i] +
        maxboost[i] + "</td>");

    }

    document.write("</tr>"); //closing the table row
  }
  document.write("</table>"); //closing the table
}
info();

The 2.22345292.031 and similar numbers are due to string concatenation - when you use the + operator with strings, it creates another concatenated string. (unsure about the desired outcome here)

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

Update the src attribute of img elements using regular expressions

Figured it out in case anyone might find it useful, here's the solution: var feed = feeds.entries[i].content; var parsedFeed = feed.replace(/src=/gi, "tempsrc="); var tmpHolder = document.createElement('div'); tmpHolder.innerH ...

I have two ng-controller instances that require sharing data between them

Greetings! Currently, I am working with 2 controllers in my app.js file. app = angular.module('dbaccess',[]); app.controller('process', function($http, $scope,$location, $service){ $scope.update = function(user){ $scope.mas ...

React Native app experiencing issue with Redux Saga call(fetch...) function failing to return any data

Having a background in Redux, I am delving into Redux-Saga for the first time. Currently, I am working on setting up a login feature using React Native with Redux and Redux-Saga. However, I'm facing an issue where I cannot retrieve the response from t ...

Having trouble sending data to API with Node, Express, and vanilla JavaScript POST form

I am currently utilizing Node JS along with Express JS in order to implement a form submission that pushes data into the database. Below is my form structure <form action="/pokedex/register/poke_submission" method="POST"> ...

AngularJS application: the button requires two clicks to activate

In my attempt to develop a simple CRUD app using AngularJS, I encountered an issue. The initial step involves clicking a button that fetches data from a REST API and populates an array. This array is then iterated using ng-repeat to generate Bootstrap card ...

`replace an element and its children with the same identifier`

For my project, I am attempting to dynamically load e-book chapter pages using ajax requests. Here is an example of the HTML markup I am working with: <html><body> <div id="p5"> <div id="p6"> <p class="heading">heading1</p ...

Steps for creating a functional dropdown menu using list items and retrieving the selected values

I am looking to implement a feature with multiple drop-down menus using list items. The functionality I desire is that when the user clicks on a ul element, the list items should drop down. Then, upon clicking on a specific list item, the value of that ite ...

Steps to configure useState to manage data within an object

Having trouble setting an object with useState in my code. Despite my effort, I am only getting the initial value for the object named setWishlist. Can someone spot what mistake I am making? const CenterModal = props => { const [modalData, setModalDa ...

"Utilizing a dynamic global variable in Node.js, based on the variable present in

I'm looking to achieve the following: var userVar={} userVar[user]=["Values"]; function1(user){ //calculations with userVar[user] } function2(user){ //calcula ...

Adding Gauss to the list

I've been working on writing code to append values of the Gauss probability density function to an array. Here's what I have so far: N=100 U = numpy.array([]) for i in range(0, N): n = random.random() numpy.append(U,n) for i in range(0, i ...

most efficient method of sharing information between various angular controllers

I am looking for a way to share form data among multiple controllers before submitting it. Currently, I am using module.value() to store the data as a global variable. var serviceApp = angular.module('sampleservice', [ ]); serviceApp.valu ...

Presentation - hyperlink only functioning for final slide

I have a question about Lean Slider, which you can check out at My goal is to link each slide to a different URL. However, I'm facing an issue where only the code in the last slide seems to be executed and applied to all other slides. For example, if ...

The $.get method in AJAX/jQuery is functioning properly, however, there seems to be an issue with

Yesterday, I successfully made my first AJAX call by using this function that was connected to a button click event. function ajaxFunction(){ $.get("ajax/calendar.php", function(data){ $('#ajaxResponse').html(data); }); }; Now, I want t ...

Unable to trigger onClick event

The button I have with the id "jump-button" is not functioning at all. When clicked, nothing happens. I have added an alert(); to the onclick attribute to test if the button is working. However, the other two buttons (next and prev) are working perfectly ...

Which programming language is more suitable for developing a chat website - PHP or JSP?

My goal is to create a web-based chat application similar to Yahoo's, utilizing JSP/PHP with AJAX. I'm debating between using JSP or PHP for this project and looking for the advantages and disadvantages of each. Which do you think would be bette ...

Building a single page web application using TypeScript and webpack - a step-by-step guide

For a while now, I've been working on single page applications using Angular. However, I'm interested in creating a single page application without utilizing the entire framework. My goal is to have just one .html file and one javascript file, w ...

Unlocking the Power of JavaScript Variables from ASP.NET Code Behind

I've incorporated JavaScript into my project and I'm using the following code: <script type="text/javascript"> var tally = 0; jQuery('td').click(function () { if ($(this).hasClass('process')) { count = count ...

Enhance the functionality of Map.set by automatically storing the new entry on the disk as well

This code is intended for development purposes only, to resume work from where I left off when restarting the local server. I aim to avoid modifying the production code in any way. My goal is to save new entries to disk when using map.set(...). Below is a ...

AngularJS is experiencing issues with the sorting filter 'orderBy'

I am experiencing an issue with sorting a table list that has three columns. I have implemented the ability to sort all columns in ascending and descending order. However, when I click on the -Tag to initiate the sorting process, I encounter the following ...

The position of the mouse on the canvas following a CSS scaling

I'm currently working on finding the mouse coordinates on an HTML5 canvas element. I set the canvas dimensions to 700x700. When I hover over the canvas, I aim to retrieve the X,Y coordinates of the mouse. Everything goes smoothly until I resize the c ...