JavaScript Table not displaying

Question

I've made this table:

<button onclick="calc();">Display Results</button>
<table id='data' data-role="table" >
    
</table>

To take values from these sliders:

<form method="post">
    <label for="points">Voltage (V)</label>
    <input type="range" name="points" id="volt" value="0" min="0" max="1000" step="10">
</form>
<form method="post">
    <label for="points">Minimum Resistance (&#8486)</label>
    <input type="range" name="points" id="resMin" value="50" min="100" max="1000" step="100">
</form>
<form method="post">
    <label for="points">Maximum Resistance (&#8486)</label>
    <input type="range" name="points" id="resMax" value="50" min="100" max="1000" step="100">
</form>

And this function:

function calc()
{   
    var volt=document.getElementById("volt").value;
    var resMin=document.getElementById("resMin").value;
    var resMax=document.getElementById("resMax").value;

    var table = document.getElementById("data");
    var header = table.createTHead();
    var row = header.insertRow(0);
    
    row.insertCell(0).innerHTML = "Voltage (V)";
    row.insertCell(1).innerHTML = "Resistance (&#8486)";
    row.insertCell(2).innerHTML = "Power (W)";
    

    for (var i = 0; i<= ((resMax - resMin)/100); i++)
    {
        table.insertRow(i+1);
        table.rows[i+1].insertCell(0);
        table.rows[i+1].insertCell(1);
        table.rows[i+1].insertCell(2);
        
        table.rows[i+1].cells[1].innerHTML = resMin + i*100;
        table.rows[i+1].cells[2].innerHTML = (Math.pow(volt,2)/resMin);
    }
    

}

But, I get no errors, and when I click the button, nothing happens. The browser console is clean, there doesn't appear to be any syntax errors, and I can't seem to find a solution.

Full HTML:

<!DOCTYPE html>
<!--
Khalid Alzhrani
A00361007
Assignment #4
-->
<html>
  
  <head>
    <title>Chapter 4 - PE4</title>
    <link rel="stylesheet"
          href="css/jquery.mobile-1.4.5.min.css">
    <script src="scripts/jquery-1.12.0.min.js">
    </script>
    <script src="scripts/jquery.mobile-1.4.5.min.js">
    </script>
    <script type='text/javascript' src='scripts/display.js'>
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  
  <body>
      <div data-role ="header" data-theme="b" style="text-align:center;">
      Electricity<br>Calculator</div>
      
      
     <div data-role="content" class="ui-content">
        <form method="post">
            <label for="points">Voltage (V)</label>
            <input type="range" name="points" id="volt" value="0" min="0" max="1000" step="10">
        </form>
        <form method="post">
            <label for="points">Minimum Resistance (&#8486)</label>
            <input type="range" name="points" id="resMin" value="50" min="100" max="1000" step="100">
        </form>
        <form method="post">
            <label for="points">Maximum Resistance (&#8486)</label>
            <input type="range" name="points" id="resMax" value="50" min="100" max="1000" step="100">
        </form>
         
        <button onclick="calc();">Display Results</button>
        
        
        <table id='data' data-role="table" >
        
        </table>



    <div data-role = "footer" data-theme="b" style="text-align:center;">
        <small>Power Display</small><br>
      <small>Khalid Alzhrani - A00361007</small>  
    </div>
         
     </div>
      
  </body>

The html you've posted is incomplete. Where is resMin orresMax? — Yass
– Yass, Commented Mar 13, 2016 at 21:11
@Yass Did you check my post for when I said the console is clean? — NictraSavios
– NictraSavios, Commented Mar 13, 2016 at 21:19

Scott Marcus · Accepted Answer · 2016-03-14 01:02:46Z

1

Your variables: volt, resMin and resMax are the same names as the actual elements. If you attempt to access these variables from a scope other than where the variables are declared, you are actually accessing the objects themselves and therefore not getting their values because in JavaScript any element that has an id can be accessed in code through that global id name.

In addition, you should not use inline HTML event handlers as they create spaghetti code and create global wrapper functions around your callback code.

Lastly, you didn't have a line in there about the volt column in the new row.

Here's a working fiddle: https://jsfiddle.net/fjnyrpm1/15/ that uses the DOM Event standard addEventListener() for wiring up events.

edited Mar 14, 2016 at 1:02

answered Mar 13, 2016 at 21:31

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

NictraSavios Over a year ago

Its a working fiddle, but for some reason doesn't work in an actual webserver (XAMPP and Dreamweaver) I also didn't have anything in the volt column because well, I didn't know if I was going to have all cells display the voltage, or just one big one with it written a single time.

Scott Marcus Over a year ago

All code in fiddle follows standards and should work everywhere. Have never heard of XAMPP.

NictraSavios Over a year ago

Well, it doesn't seem to work in dreamweiver. Would you like me to pastebin the code and show you? XAMP is just a standard LAMP stack. (more or less)

NictraSavios Over a year ago

Pastebin: pastebin.com/ELrJG1MP & pastebin.com/0GWiZTRQ JSFiddle: jsfiddle.net/nictrasavios/6ejtzbh5/2

Scott Marcus Over a year ago

@NictraSavios Don't you want to create the header row just once, no matter how many times a new entry is added?

|

Collectives™ on Stack Overflow

JavaScript Table not displaying

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related