我制作了这张表:
<button onclick="calc();">Display Results</button>
<table id='data' data-role="table" >
</table>
要从这些 slider 中获取值:
<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 (Ω)</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 (Ω)</label>
<input type="range" name="points" id="resMax" value="50" min="100" max="1000" step="100">
</form>
这个函数:
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 (Ω)";
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);
}
}
但是，我没有收到任何错误，并且当我单击按钮时，什么也没有发生。 浏览器控制台很干净，似乎没有任何语法错误，而且我似乎找不到解决方案。
完整 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 (Ω)</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 (Ω)</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>
最佳答案
您的变量:volt、resMin 和 resMax 与实际元素的名称相同。如果您尝试从声明变量的范围之外的范围访问这些变量，那么您实际上是在访问对象本身，因此无法获取它们的值，因为在 JavaScript 中，可以访问任何具有 id 的元素在代码中通过该全局 ID 名称。
此外，您不应使用内联 HTML 事件处理程序，因为它们会创建意大利面条式代码并围绕您的回调代码创建全局包装函数。
最后，新行中没有关于伏特列的行。
这是一个工作 fiddle :https://jsfiddle.net/fjnyrpm1/15/它使用 DOM 事件标准 addEventListener() 来连接事件。
关于JavaScript 表格不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35975895/