<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comparing Alternatives</title>
<style>
* {
text-align:center;
font-family:Arial Narrow;
font-size:calc(16px + 1vw);
}
.sl { border-left:1px #000 solid; }
.st { border-top:1px #000 solid; }
.sr { border-right:1px #000 solid; }
.sb { border-bottom:1px #000 solid; }
td {
text-align:center;
border-radius:10px;
}
input {
height:50px;
}
</style>
<script>
// Array weight of each parameter
var wa = [10,5];
// Get the DOM for el
function $(el) { return document.getElementById(el); }
// Get and display the value of the input range
function dispValue(el)
{
$(el.id+"d").innerHTML = el.value;
calcValue(el.id[0]);
}
// Calculate the value of the correlation according to the weight of each parameter
function calcValue(ida)
{
var a1 = parseInt($(ida+"1d").innerHTML) * wa[0];
var a2 = parseInt($(ida+"2d").innerHTML) * wa[1];
var r1 = parseInt($("r1d").innerHTML) * wa[0];
var r2 = parseInt($("r2d").innerHTML) * wa[1];
$(ida+"w").innerHTML = Math.abs(a1 - r1) + Math.abs(a2 - r2);
}
// Calculate the value of the goal and show the suitability of all the alternatives
function dispValueG(el)
{
$(el.id+"d").innerHTML = el.value;
calcValue("a");
calcValue("b");
calcValue("c");
}
</script>
</head>
<body>
<br>
<h1>Weight matching algorithm using JavaScript</h1>
<p>Simple weight matching algorithm using JavaScript.</p>
<p>Change the alternative or goal values to find the best match.</p>
<p>Zero value indicates the best match.</p>
<br>
<table align="center" style="width: 800px; border-collapse: collapse;" cellpadding="5" cellspacing="5">
<tr>
<td style="width:35%" class="sr" >Alternatives</td>
<td style="width:10%"></td>
<td style="width:10%"> </td>
<td style="width:10%" class="sr"></td>
<td style="width:35%" class="sl sb">Goal requirement</td>
</tr>
<tr>
<td class="sb st">
<input id="a1" type="range" min="0" max="10" value="5" oninput="dispValue(this)">
<br>
<input id="a2" type="range" min="0" max="10" value="5" oninput="dispValue(this)">
</td>
<td class="sr st" >
<span id="a1d">5</span><br>
<span id="a2d">5</span>
</td>
<td class="sb st sl" >
<span id="aw">0</span>
</td>
<td class="st sl">
</td>
<td class="st" sb>
</td>
</tr>
<tr>
<td class="st sb">
<input id="b1" type="range" min="0" max="10" value="5" oninput="dispValue(this)">
<br>
<input id="b2" type="range" min="0" max="10" value="5" oninput="dispValue(this)">
</td>
<td class="sr">
<span id="b1d">5</span><br>
<span id="b2d">5</span>
</td>
<td class="sl st sb">
<span id="bw">0</span>
</td>
<td class="sl">
<span id="r1d">5</span><br>
<span id="r2d">5</span>
</td>
<td class="st sb">
<input id="r1" type="range" min="0" max="10" value="5" oninput="dispValueG(this)">
<br>
<input id="r2" type="range" min="0" max="10" value="5" oninput="dispValueG(this)">
</td>
</tr>
<tr>
<td style="border-top-style: solid; border-top-width: 1px">
<input id="c1" type="range" min="0" max="10" value="5" oninput="dispValue(this)">
<br>
<input id="c2" type="range" min="0" max="10" value="5" oninput="dispValue(this)">
</td>
<td style="border-right-style: solid; border-right-width: 1px">
<span id="c1d">5</span><br>
<span id="c2d">5</span>
</td>
<td class="sl st">
<span id="cw">0</span>
</td>
<td class="sl"></td>
<td class="st"> </td>
</tr>
</table>
<hr>
<p style="text-decoration: underline">Working Phases</p>
<p>Create the required tables</p>
<p>Set IDs for each cell</p>
<p>Add input type=range</p>
<p>Set IS for inputs</p>
<p>Display the input range in the span</p>
<p>Write a JavaScript to gather the information</p>
<p>Make the proper calculation</p>
<p>Use concole.log to test your results</p>
<p>Display the results in the proper span</p>
</body>
</html>