Нажатие кнопки на веб-сайте HTML, который динамически обновляет таблицу с данными и гиперссылками, используя JavaScript
У меня есть веб-приложение, которое я создаю. Он запрашивает четыре ввода от пользователя, затем пользователь должен нажать на кнопку "рассчитать", и я хочу, чтобы таблица создавалась с использованием кода javascript, который создает таблицу из трех столбцов и переменных строк в зависимости от ввода. В третьем столбце динамически создаваемой таблицы я хочу, чтобы на нее нажимали ссылки в виде другой функции, которая рисует картинку на сайте. У меня это статически построено, но оно показывает ссылки, которые ничего не делают, если пользователь вводит данные, которые не дают хороших результатов для этой ссылки. Поэтому я хочу, чтобы ссылки показывали только то, что рассчитано для диапазона значений.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mobile.css" media="screen and (max-width:480px)" />
<link rel="stylesheet" href="phablet.css" media="screen and (min-width:481px)" />
<link rel="stylesheet" href="tablet.css" media="screen and (min-width:769px)" />
<link rel="stylesheet" href="tabletlarge.css" media="screen and (min-width:1368px)" />
<link rel="stylesheet" href="desktop.css" media="screen and (min-width:1500px)" />
<script type="text/javascript" src="transfer.js"></script>
<meta charset=utf-8 />
<title>Transfer Plate Calculator</title>
</head>
<body>
<header>
<h1 class="rounded">Transfer Plate Calculator</ha>
</header>
<section class="wholepage">
<div class="topleft">
<table id="mainform">
<tr>
<td colspan="2">
<input type="radio" name="units" value="1" onclick="imperialUnits();" checked="checked">Imperial
<input type="radio" name="units" value="2" onclick="metricUnits();">Metric<br/>
</td>
</tr>
<tr>
<td>
<p class="userinput">Diameter of first pulley : </p>
</td>
<td>
<input type="text" placeholder="Enter a diameter 2-16 inches" class="inputbox" id="pulleyOne"/><br>
</td>
</tr>
<tr>
<td>
<p class="userinput">Diameter of second pulley: </p>
</td>
<td>
<input type="text" placeholder="Enter a diameter 2-16 inches" class="inputbox" id="pulleyTwo"/><br>
</td>
</tr>
<tr>
<td>
<p class="userinput">Center to center dimension: </p>
</td>
<td>
<input type="text" placeholder="Enter center distance 2-18 inches" class="inputbox" id="centerCenter"/><br>
</td>
</tr>
<tr>
<td>
<p class="userinput">Inside structure width: </p>
</td>
<td>
<input type="text" placeholder="Enter inside structure width 12-62 inches" class="inputbox" id="insideStructure"/><br>
</td>
</tr>
</table>
<br>
</div>
<canvas id="canvas" width="1176" height="600"></canvas>
<input id="button" type="button" onClick=" createTable(); yTan10(); yTan09(); yTan0844(); yTan0835(); yTan0734(); yTan0725(); yTan0633(); yTan0624(); yTan05(); yTan04(); yTan03(); yTan025(); yTan0225(); yTan02(); yTan0175(); yTan015(); drawTransfer();" Value="Calculate" />
<p class="labeltext">Click link in table to view transfer<br>
<table class="tabletext" id = "mytable">
<tr>
<td>Transfer Size</td>
<td>Drop Distance From Tangent</span></td>
<td>Click link to draw transfer</td>
</tr>
</table>
</p>
</section>
</body>
</html>
Это не весь JavaScript, но ниже приведена часть функций, которые я использую.
function yTan10()
{
dia1 = document.getElementById("pulleyOne").value;
dia2 = document.getElementById("pulleyTwo").value;
var rad1 = (dia1/2);
var rad2 = (dia2/2);
centerInput = document.getElementById("centerCenter").value;
var sqTest = (-Math.sqrt((4*rad2*rad1*Math.pow(10,4))-(16*rad2*rad1*Math.pow(10,3)*centerInput)+(24*rad2*rad1*Math.pow(10,2)*Math.pow(centerInput,2))-(16*rad2*rad1*10*Math.pow(centerInput,3))+(4*rad2*rad1*Math.pow(centerInput,4))-Math.pow(10,6)+(6*Math.pow(10,5)*centerInput)-(15*Math.pow(10,4)*Math.pow(centerInput,2))+(20*Math.pow(10,3)*Math.pow(centerInput,3))-(15*Math.pow(10,2)*Math.pow(centerInput,4))+(6*10*Math.pow(centerInput,5))-Math.pow(centerInput,6))+(rad2*Math.pow(10,2))-(2*rad2*10*centerInput)+(rad2*Math.pow(centerInput,2))+(rad1*Math.pow(10,2))-(2*rad1*10*centerInput)+(rad1*Math.pow(centerInput,2)))/(2*(Math.pow(rad2,2)-(2*rad2*rad1)+Math.pow(rad1,2)+Math.pow(10,2)-(2*10*centerInput)+Math.pow(centerInput,2)));
var LPA = 90-((Math.asin((Math.max(rad1,rad2)-sqTest)/Math.max(rad1,rad2))*180)/Math.PI);
var SPA = 90-((Math.asin((Math.min(rad1,rad2)-sqTest)/Math.min(rad1,rad2))*180)/Math.PI);
var YLPA = (-0.0000016143916753316*Math.pow(LPA,3))+(0.000294186014381977*Math.pow(LPA,2))-(0.0183588329226113*LPA)+(0.491447378836292);
var YSPA = (-0.0000000257214673355*Math.pow(SPA,4))+(0.0000036250626227647*Math.pow(SPA,3))-(0.0000881822886875478*Math.pow(SPA,2))-(0.00671550988311635*SPA)+(0.375849622165335);
var YCalc = ((YLPA + YSPA)/2);
var TopDownTransfer = (sqTest - YCalc);
var RadLegLarge = Math.sqrt(Math.pow((Math.sqrt((Math.pow(Math.max(rad1,rad2),2))-(Math.pow((sqTest-Math.max(rad1,rad2)),2)))+4.44),2)+(Math.pow((Math.max(rad1,rad2)-sqTest-1.619),2)));
var RadLegSmall = Math.sqrt(Math.pow((Math.sqrt((Math.pow(Math.min(rad1,rad2),2))-(Math.pow((sqTest-Math.min(rad1,rad2)),2)))+4.44),2)+(Math.pow((Math.min(rad1,rad2)-sqTest-1.619),2)));
if ((TopDownTransfer < 0) || (TopDownTransfer > Math.min(rad1,rad2)) || (isNaN(TopDownTransfer)) || (10 >= centerInput) || (RadLegLarge < (Math.max(rad1,rad2))) || (RadLegSmall < (Math.min(rad1,rad2))))
{
var validTten = "-";
}
else
{
var validTten = (TopDownTransfer.toFixed(2));
}
document.getElementById("tanTan10").innerHTML = validTten;
}
Вот моя функция createTable, в которой я пытаюсь добавить ссылку на функцию, но я не знаю, как это сделать. Любая помощь приветствуется. Спасибо!
function createTable() {
var table = document.getElementById("mytable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var a = document.createElement("a");
var txt = document.createTextMode("Transfer 10");
a.appendChild(txt);
a.href = <a href="#" onClick="draw1055();";
cell1.innerHTML = "Transfer 10";
cell2.innerHTML = "tanTan10";
cell3.appendChild(a);
}