I want this type of HTML page of this format . please help

JavaScript
1 
           Input Field           Fixed Weightage         Calculated Weighted Score   

Service              1                         5                                 6
Operations           2                         3                                 5
Plan                 3                         1                                 4
Security             2                         1                                 3
                          Total               10                               1.8

Calculated Weighted score at last is adding all in 4 column / adding all in third column so 18/10 = 1.8

2

looks like you want to use a table.

1 Like
3

Here’s one way to do it:

4 Likes
4

Unrelated to this question, but that is going to come in very handy for something I was scratching my head about.

1 Like
5

Hi Chris,

Thank you for reading my post.

if you know , then tell me.

6

Thank You for help Dormilich.

Can you tell me, how can we do that with html and javascript or any other with php.

7

You might have missed my codepen example. Here’s the code.

The HTML:

<table id="scores">
  <tr><th>Input field</th><th>Fixed weightage</th><th>Calculated weighted score</th></tr>
</table>

The CSS:

td.number {
  text-align: right;
}

The JavaScript

function getWeightedScore(scoreInfo) {
  return scoreInfo.input + scoreInfo.weightage;
}
function getWeightage(scores) {
  return scores.reduce(function (weightage, scoreInfo) {
    return weightage + scoreInfo.weightage;
  }, 0);
}
function getWeightScores(scores) {
  return scores.reduce(function (weightScores, scoreInfo) {
    return weightScores + getWeightedScore(scoreInfo);
  }, 0);
}
function addScore(scoreInfo, rowIndex) {
  var row = table.insertRow(rowIndex + 1);
  var cell = row.insertCell(0);
  cell.innerHTML = scoreInfo.input;
  cell.classList.add('number');
  cell = row.insertCell(1);
  cell.innerHTML = scoreInfo.weightage;
  cell.classList.add('number');
  cell = row.insertCell(2);
  cell.innerHTML = getWeightedScore(scoreInfo);
  cell.classList.add('number');
}
function showScores(scores, table) {
    scores.forEach(addScore);  
}
function addTotal(weightage, weightScores, table) {
  var row = table.insertRow(scores.length + 1);
  var cell = row.insertCell(0);
  cell = row.insertCell(1);
  cell.innerHTML = "Total " + weightage;
  cell = row.insertCell(2);
  cell.innerHTML = weightScores / weightage;
}

var scores = [
  {"input": 1, "weightage": 5},
  {"input": 2, "weightage": 3},
  {"input": 3, "weightage": 1},
  {"input": 2, "weightage": 1}
];
var weightage = getWeightage(scores);
var weightScores = getWeightScores(scores);
var table = document.getElementById("scores");

showScores(scores, table);
addTotal(weightage, weightScores, table);
8

Paul thank you for the answer. I wanted that the user should enter value in the INPUT FIELD from 1 to 4

Now here is the FIXED WEIGHTAGE for each INPUT FIELD is for

1 => 5
2 => 3
3 => 1
4 => 1

So once the user enters the 1 in INPUT FIELD then, automatically the FIXED WEIGHTAGE should be updated accordingly. like if INPUT FIELD 1 then FIXED WEIGHTAGE be 5 and so on.

The calculated weighted score is addition of INPUT FIELD + FIXED WEIGHTAGE

and last the FIXED WEIGHTAGE is added and written in Total and also Calculated weighted score is added and DIVIDED by Fixed Weightage Total and quotient is written

9

Sounds interesting. Can you please share what you finally have?

10

Input field Fixed weightage Calculated weighted score
1 5 6
2 3 5
3 1 4
2 1 3
Total 10 1.8

11

Thanks, but I meant the code, not an example of the results.

That is, I would like to see how you’re doing it.

12

this is the link . i have made a map of numbers.

also i need another third column of get the sum of previous two columns horizontally.

here is the code

<html>
<head></head> 
<body>
  <form name="form">
    <input onblur="findTotal()" type="text" onChange="passit1()"  name="input1" id="qty8"> 
    <input type="text"  name="output1"><br>
    <input onblur="findTotal()" type="text" onChange="passit2()" name="input2" id="qty9"> 
    <input type="text"  name="output2"><br>
  </form>
  <br><br>
  Total : <input type="text" name="total" id="total"/>
</body>

JavaScript

var myMap = new Map();

myMap.set("1", "5");
myMap.set("2", "4");
myMap.set("3", "1");
myMap.set("4", "1");

// pass variable to field
function passit1() {
  var newtext = document.form.input1.value;
  document.form.output1.value=myMap.get(newtext );
}
function passit2(){
  var newtext = document.form.input2.value;
  document.form.output2.value=myMap.get(newtext );
}
13

That’s nice - I need to get to sleep soon, and get ready for a nice long weekend of enjoying euro-style tabletop games with some friends.

Are you just looking for the code from us, or would you like to learning how to solve this type of problem?

14

After several updates, the updated code is done.

  • Input fields are now used for the score
  • The scores update when you press the up.down keys
  • The weightage, calculated, and totals all update when changes occur
  • Scores that result in unknown weightage values are not accepted, returning back to what they were

You’ll note that the above was built on top of the previous concept from before. It should be fairly easy to expand the code so that it can accept a potentially large number of scores.

1 Like
15

Thank You Paul. I respect you . Great work.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.