how to declare div and id/class in java script

Question

I have the index.html file in that form fields are there form action is confirm.html. In confirm.html some data, I displayed using js. But showing the only table I decided to I use menus in that so more attractive for users. Whenever I'm trying to declare div(<h1>data</h1>) in confirm.html it won't be showing any data. so I decided to declare using js.

Top of the headers i have to show those menus:

document.write("<div class="Menu">");

document.write("<div class="leftmenu">");
document.write("<h4>Fegli</h4>");

document.write("<div class="Menu">");
doucment.write("<ul>");
document.write("<li>Home</li>");
document.write("</ul>");

document.write("</div>");
document.write("</div>");
document.write("</div>");

Confirm.html: code

<html>
<head>

<script type="text/javascript" src="calculate.js"> 
</script>
</head>    

<body onload="init();">
<div id="Menu">
it wont showing on web page
</div>

</body>

</html>

Calculate.js code

// Called on body's `onload` event
var cumulative=0;
 function init() {

  var salary = parseInt(localStorage.getItem("salary"));
  var percent = parseFloat(localStorage.getItem("percent"));
  var age = parseInt(localStorage.getItem("age"));
  var rAge = parseInt(localStorage.getItem("rAge"));
  var sel = localStorage.getItem("sel");

  var roundedSalary = parseInt(Math.ceil((salary + 2000) / 1000) * 1000); //Doing Rounding for basic column Display
  var basic;
  var factor = 0;
  var biWeekly = 0, monthly = 0,annual = 0;


    //Displaying Headers
    document.write("<head>");
    document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"confirm.css\">");
    document.write("<title>Result</title>");
    document.write("</head>");
    document.write("<body>");

 /* document.write("<center>")
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear();

  if (dd < 10) {
   dd = '0' + dd
  }

  if (mm < 10) {
   mm = '0' + mm
  }
  today = mm + '/' + dd + '/' + yyyy;
  document.write("<h1>" + "FEGLI CALCULATIONS ON" + "&nbsp;" + today + "</h1>");
  document.write("</center>")
  */


  document.write("<table><tr><th>&nbsp;Age&nbsp;</th><th>&nbsp;Annual-Salary&nbsp;</th><th>&nbsp;BiWeekly-Premium&nbsp;</th><th>&nbsp;Monthly-Premium&nbsp;</th><th>&nbsp;Annual-Premium&nbsp;</th><th>&nbsp;Cumulative-Premium&nbsp;</th><th>Basic&nbsp;</th><th>&nbsp;Total&nbsp;</th></tr>");
  basic = parseInt(roundedSalary * calculateFactor(age));
  //document.write("roundedSalary"+roundedSalary+"calculateFactor"+calculateFactor(age));
  premium = calculateBiweekly(salary, basic, age, rAge);
  biWeekly = premium[0];
  monthly = premium[1];
  annual = premium[2];
  cumulative = premium[3];


  document.write("<tr><td>" + age + "/" + (age + 1) + "</td><td>" + "$" + salary.toFixed(2) + "</td><td>" + "$" + biWeekly.toFixed(2) + "</td><td>" + "$" + monthly.toFixed(2) + "</td><td>" + "$" + annual.toFixed(2) + "</td><td>" + "$" + cumulative.toFixed(2) + "</td><td>" + "$" + basic + "</td><td>-</td></tr>");

  salary = parseFloat(salary);

  for (var i = age + 1; i < 101; i++) {
   document.write("<tr>");
   document.write("<td>" + i + "/" + (i + 1) + "</td>");

   if (i < rAge) {

    salary = salary + (salary * percent);

    roundedSalary = parseInt(Math.ceil((salary + 2000) / 1000) * 1000);
    //          document.write("age"+i+"roundedSalary"+roundedSalary+"<br>");
    document.write("<td>" + "$" + salary.toFixed(2) + "</td>");
   } else {
    salary = 0;
    document.write("<td>-</td>");
   }



   basic = parseInt(roundedSalary * calculateFactor(i));

   premium = calculateBiweekly(salary, basic, i);
   biWeekly = premium[0];
   monthly = premium[1];
   annual = premium[2];
   cumulative = premium[3];

   document.write("<td>" + "$" + biWeekly.toFixed(2) + "</td>");
   document.write("<td>" + "$" + monthly.toFixed(2) + "</td>");
   document.write("<td>" + "$" + annual.toFixed(2) + "</td>");
   document.write("<td>" + "$" + cumulative.toFixed(2) + "</td>");

   document.write("<td>" + "$" + basic + "</td>");
   document.write("<td>-</td>");
   document.write("</tr>");
 }
  document.write("</table>");
  document.write("</body>")
 }

 function calculateFactor(age) {
  var factor = 0;
  if (age > 35 && age < 45) {


   switch (age) {


    case 36:
     factor = 1.9;
     break;

    case 37:
     factor = 1.8;
     break;

    case 38:
     factor = 1.7;
     break;

    case 39:
     factor = 1.6;
     break;

    case 40:
     factor = 1.5;
     break;

    case 41:
     factor = 1.4;
     break;

    case 42:
     factor = 1.3;
     break;

    case 43:
     factor = 1.2;
     break;

    case 44:
     factor = 1.1;
     break;


   }
  } else if (age <= 35) {
   factor = 2;
  } else if (age >= 45) {
   factor = 1;
  }

  return factor;
 }

 function calculateBiweekly(salary, basic, age) {
  var biWeekly = 0;

  if (salary > 0) {

   biWeekly = ((basic / calculateFactor(age)) * 0.15) / 1000;
   monthly = ((basic / calculateFactor(age)) * 0.325) / 1000;



  } else if (salary == 0 && age <= 65) {



   biWeekly = ((basic / calculateFactor(age)) * (2.455 / 2.166)) / 1000;
   monthly = ((basic / calculateFactor(age)) * (2.455)) / 1000;


  } else if (salary == 0 && age > 65) {

   //document.write("age"+age+"salary"+salary+"<br>");
   biWeekly = ((basic / calculateFactor(age)) * (2.13 / 2.166)) / 1000;
   monthly = ((basic / calculateFactor(age)) * (2.13)) / 1000;


  }
   annual = 12 * monthly;
cumulative = cumulative+annual;
  //document.write("cumulative"+cumulative+"<br>");

  return [biWeekly, monthly, annual, cumulative];
 }// Called on body's `onload` event

Would you please restructure your code? It's not quite clear and why document.write is used? — Vinit Desai
– Vinit Desai, Commented Sep 14, 2018 at 13:04

saAction · Accepted Answer · 2018-09-14 13:13:00Z

I don't recommend document.write() to create element in DOM.

You need to use document.createElement() function to create new element using javascript.

function addMenu() {
    var html = '<div class="Menu">';
    html += '<div class="leftmenu">';
    html += '<h4>Fegli</h4>';
    html += '<div class="Menu">';
    html += '<ul><li>Home</li></ul>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    document.getElementById("Menu").innerHTML = html;
}

addMenu();

<div id="Menu"></div>

In your code you applied table using document.write(), you can also create table tag using document.createElement() function. check below examples:

Example 1 :

function addTable() {
    var c, r, t;
    t = document.createElement('table');
    t.border=1;
    
    r = t.insertRow(0);//create row
    
    c = r.insertCell(0);///create cell
    c.innerHTML = "Apple";
    c = r.insertCell(1);///create second cell
    c.innerHTML = "Orange";
    
    document.getElementById("mainContainer").appendChild(t);
}

addTable();

<div id="mainContainer"></div>

Example 2 :

function addTable() {
    var html = "<table border='1'><tr><td>Apple</td><td>Orange</td></tr></table>";
    document.getElementById("mainContainer").innerHTML = html;
}

addTable();

<div id="mainContainer"></div>

Both example will give same result.

Collectives™ on Stack Overflow

how to declare div and id/class in java script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related