Creating tables using for loop data

JavaScript
#1

Hi all :slight_smile:

I am trying to make a program where the user inputs information into the prompt boxes which is then displayed in a table. If anyone can help me out with where I am going wrong, it would be incredibly helpful :slight_smile:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
	<script>
		
	//declaring variables	
	var jobtittle;
	var employer;
	var salary;
	
	//repeating the prompts 5 times	
	for(var i=1;i<=5;i++){
		
		//asks user for input for job title
		jobtitle = prompt ("Please enter the job title for advertisement", " ");
		
		//checks if prompt box is empty
		if (jobtitle === " ") {
			jobtitle=prompt ("Job title name not supplied", " ");
		}
		
		//asks user for employer
		employer = prompt ("Please enter the employer name for advertisement", " ");
		
		//checks if prompt box is empty
		if (employer === " ") {
			employer=prompt ("Employer name not supplied", " ");
		}

		//asks user for salary
		salary = prompt ("Please enter the annual salary for advertisement", " ");
								
			//checking salary is a valid number and prompting correct input if not
			salary=parseInt(salary);
				while(isNaN(salary)){
					salary=prompt("Annual salary not supplied.", " ");
					salary=parseInt(salary);
		}		
		
	}	

		//table
		document.write('<table>');
		document.write ('<tr><th align="left"> Job Title </th>');
		document.write('<th align="left"> Employer Name </th>');
		document.write('<th align="left"> Annual Salary ($) </th> </tr>');
		
		for(var i=0; i < jobtitle.length; i++)
			{
				document.write('<tr><td>' + jobtitle[i] + '</td></tr>');
			}		
		
		for(var i=0; i < employer.length; i++)
			{
				document.write('<tr><td>' + employer[i] + '</td></tr>');
			}
			
		for(var i=0; i < salary.length; i++)
			{
				document.write('<tr><td>' + salary[i] + '</td></tr>');
			}
			
		document.write('</table');
		
	</script>
	</body>
</html>
#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

What are you expecting the code to do that it currently does not do? Basically, what are the steps to reproduce the issues you are seeking to resolve?

#3

After reviewing your code, I notice you have several logic issues going on.

  1. You are only going to display one job entry (including job title, employer name, and salary). Why? Because even though you request the information 5 different times with your main for loop, you overwrite the values of the variables jobtitle, employer, and salary. After the main for loop, you attempt to iterate through each of these variables (but I will discuss that in the next point).

  2. You next have 3 loops which iterate through each of the variables jobtitle, employer, and salary. The problem is that each of the variables is a string and not an array, do you end up iterating though each letter of the strings and displaying them on a separate line.

To do what you are really wanting to do here, my suggestion is to create an empty array called jobs and then within the main for loop, after you capture the values in the 3 variables (jobtitle, employer, salary), create a literal object using the variable names as properties of the object and the value of the properties being the value of the variables. Next, you would push these into the array named jobs. Then, after the main for loop has completed collecting all the information, you would use a single for loop to iterate through the jobs array and reference each object’s jobtitle, employer, and salary in separate lines (like below):

  for (var i = 0; i < jobs.length; i++) {
    document.write('<tr><td>' + jobs[i].jobtitle + '</td><td>' + jobs[i].employer + '</td><td>' + jobs[i].salary + '</td></tr>');
  }

OR using for…of loop and destructuring each object

  for (var { jobtitle, employer, salary } of jobs) {
    document.write('<tr><td>' + jobtitle + '</td><td>' + employer + '</td><td>' + salary + '</td></tr>');
  }

OR the same as above using a template literal (to make code more readable)

  for (var { jobtitle, employer, salary } of jobs) {
    document.write(`
      <tr>
        <td>${jobtitle}</td><td>${employer}</td><td>${salary}</td>
      </tr>
    `);
  }

I will let you research to figure out how to create the objects and push them into the jobs array I recommended above.

#4