Расчет ответа формы

Я просто создаю форму и стол для физиотерапевта. Нужна ваша помощь в расчете "сумма на основе ответа". Максимальное значение сложности может быть «0», а никакая сложность не может быть «4».

Я знаком с чтением и изменением кода js, html, css. Вот что я написал.

<FORM >
  <TABLE BORDER>
    <TR ALIGN=CENTER>
      <TD WIDTH=350><B>ACTIVITIES<B> </TD>
      <TD WIDTH=125><B>Extreme difficulty (0)</B></TD>
      <TD WIDTH=125><B>Quite a bit of difficulty (1)</B></TD>
      <TD WIDTH=125><B>Moderate Difficulty(2)</B></TD>
      <TD WIDTH=125><B>Little Difficulty(3)</B></TD>
      <TD WIDTH=125><B>No Difficulty(4)</B></TD>
    </TR>
    <TR ALIGN=CENTER>
      <TD  ALIGN=LEFT> Any of usual work (household, work)</TD>
      <TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "1"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "2"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "3"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "4"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "stimulat" VALUE = "5"></TD>
    </TR>
    <TR ALIGN=CENTER>
      <TD  ALIGN=LEFT> Your hobbies, recreational, sporting</TD>
      <TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "1"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "2"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "3"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "4"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "freedom" VALUE = "5"></TD>
    </TR>    
    <TR ALIGN=CENTER>
      <TD  ALIGN=LEFT> Lifting bag of groceries to waist level</TD>
      <TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "1"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "2"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "3"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "4"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "demand" VALUE = "5"></TD>
    </TR>
    <TR ALIGN=CENTER>
      <TD  ALIGN=LEFT> Grooming your hair</TD>
      <TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "1"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "2"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "3"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "4"></TD>
      <TD><INPUT TYPE = "RADIO" NAME = "creative" VALUE = "5"></TD>
    </TR>
  </TABLE>
</FORM>

Я не знаю, как вычислить значение результата в этой форме

Это все? Там, вероятно, больше, чтобы получить ответ

user3877540 09.04.2019 01:43

Цель состоит в том, чтобы иметь около пяти вопросов с пятью вариантами ответа на каждый. Самый левый выбор будет иметь значение ноль, затем 1, 2, 3,4. Когда пациент делает выбор по всем пяти вопросам, форма должна оценивать его выбор и печатать Итого внизу. Например, если он выберет середину для всех своих вариантов, то всего будет 10. Не знаю, как это сделать. Большое спасибо за Вашу помощь

user3877540 09.04.2019 02:29

Если есть форма, которая легко доступна. я могу использовать это

user3877540 09.04.2019 02:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
70
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

var total = 0;
var hi = getelementById("hi");

hi.onclick = function(){
total = 0;
}

Попробуйте добавить идентификаторы ко всем вашим флажкам и добавьте к ним функцию onclick, которая суммирует общее количество.

https://jsfiddle.net/Lvejzuac/

Не могли бы вы предоставить образец для любого из них. не понял как это сделать

user3877540 09.04.2019 01:40
Ответ принят как подходящий

Новое и полное решение

const
  theForm        = document.querySelector('#the-Form'),
  theTabBody     = document.querySelector('#Activities-Table tbody'),
  theTotal       = document.querySelector('#the-Sum'),
  theReset       = document.querySelector('#the-Reset'),
  PrintButton    = document.querySelector('#bt-Print'),
  ActivitiesList = [
    { name: 'household', lib: 'Any of usual work, household, or school activities' }
  , { name: 'hobbies',   lib: 'Your usual hobbies, recreational, sporting activities' }
  , { name: 'groceryw',  lib: 'Lifting bag of groceries to waist level' }
  , { name: 'groceryd',  lib: 'Lifting a bag of groceries above your head' }
  , { name: 'grooming',  lib: 'Grooming your hair' }
  , { name: 'pushing',   lib: 'Pushing up on your hands (e.g. from bathtub or chair)' }
  , { name: 'food',      lib: 'Preparing food (e.g. peeling, cutting ..)' }
  , { name: 'driving',   lib: 'Driving' }
  , { name: 'cleaning',  lib: 'Vaccuming, sweeping, or raking ' }
  , { name: 'dressing',  lib: 'Dressing' }
  , { name: 'dbuttons',  lib: 'Doing up buttons' }
  , { name: 'appliance', lib: 'Using tools or appliances' }
  , { name: 'doors',     lib: 'Opening doors' }
  , { name: 'cleaning1', lib: 'Cleaning' }
  , { name: 'shoes',     lib: 'Tying or lacing shoes' }
  , { name: 'sleep',     lib: 'Sleeping' }
  , { name: 'laundry',   lib: 'Laundering cloths (e.g. washing, ironing, folding)' }
  , { name: 'jar',       lib: 'Opening a jar' }
  , { name: 'ball',      lib: 'Throwing a ball' }
  , { name: 'carrying',  lib: 'Carrying a small suitcase with affected limb' }
  ]
;

function CaculSum()
{
  let total = 0;

  ActivitiesList.forEach( line => {
    total += parseInt(document.querySelector(`input[name = "${line.name}"]:checked`).value);
  })
  theTotal.textContent = ` total = ${total} `;
}

function GlobalInit()
{
  let Cheking = '';
    
  ActivitiesList.forEach( (line,iLine) => {
    let
      newRow  = theTabBody.insertRow(-1),
      newCell = newRow.insertCell(0);

      newCell.textContent = line.lib;

      Cheking = 'checked';

      for (let i=0; i<5; i++) {
        newCell           = newRow.insertCell(i+1); // id = "R-${iLine}-${i}"
        newCell.innerHTML = `<input type = "radio" name = "${line.name}" id = "R-${iLine}-${i}" value = "${i}" ${Cheking}>`
        newCell.innerHTML += `<label for = "R-${iLine}-${i}">&#x2610;</label>`; // not checked
        newCell.innerHTML += `<label for = "R-${iLine}-${i}">&#x2611;</label>`; // checked
        newCell.innerHTML += `<label for = "R-${iLine}-${i}">&#x2714;</label>`; // print checked

        Cheking = '';
      }
  })
  theTotal.textContent = ' total = 0 ';
}

GlobalInit();

theForm.onchange = CaculSum;

theForm.onreset = function() { 
  theTotal.textContent = ` total = 0 `;
};

PrintButton.onclick = function(){
  window.print();
}
body {
  font :16px Arial, Helvetica, sans-serif;
}

h3 {
  text-align:center;
  color:blue;
}
table {
  border-collapse: collapse;
  margin: 10px 20px;
}

td {
  border: 1px solid grey;
  padding: 2px 10px;
}

td {
  text-align: center;
  min-width: 100px;
  max-width: 100px;
}

tr td:first-child {
  text-align: left;
  min-width: 350px;
  max-width: 350px;
}

thead td {
  font-weight: bold;
  background: lavender
}

#the-Sum {
  display: inline-block;
  margin: 10px 20px;
  padding: 10px;

  font-weight: bold;
  color: crimson;
  border: 1px solid grey;
  width: 350px;

}
tbody tr:nth-child(even) {
  background: lavender
}

#the-Form > label, 
#the-Form > input {
  background-color:lavender;
  color: black;
  margin: 5px 10px;
  padding: 5px;
  font-weight: bold
}
#the-Form > input {
  border: 1px solid grey;
  width : 300px;
}

#the-Form tbody label { font-size: 22px; }

input[type=radio] { display:none }
input[type=radio] + label { display:inline; color: grey; } 
input[type=radio] + label + label { display:none; color:black; } 
input[type=radio]:checked + label { display:none } 
input[type=radio]:checked + label + label { display:inline } 
input[type=radio] + label + label + label { display:none }
<style media = "print">
    h3, output {  color: black; }
    h4, button { display: none; }
    table { margin: 10px 0; }
    tr td:first-child { min-width: 400px; max-width: 400px; }
    tbody tr:nth-child(even) { background: none }
    #the-Form tbody label { display:none  }
    input[type=radio]:checked + label + label + label { display:inline !important }
</style>

<h3> Dr ABC<br> MYLocation</h3>

<h4> We are interested in knowing wheather you are having any difficulty with the 
    activities listed below <u> because of your upper limb problem </u>
    for which  you are seeking attention. <br>Provide an answer for each activity
    Today, <u>do you or would you </u> have any difficulty with: (check boxes below 
    on each line)
</h4>

<form id = "the-Form">
  <label for = "patientName"> Enter Patient's Name :</label>
  <input type = "text" id = "patientName" value = "" />
    
  <table id = "Activities-Table">
    <thead>
      <tr>
        <td>ACTIVITIES </td>
        <td>Extreme difficulty&nbsp;(0)</td>
        <td>Quite a bit of difficulty&nbsp;(1)</td>
        <td>Moderate Difficulty&nbsp;(2)</td>
        <td>Little Difficulty&nbsp;(3)</td>
        <td>No Difficulty&nbsp;(4)</td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

  <output id = "the-Sum"></output>
  <!-- <button type = "submit">submit</button> --> 
  <button type = "reset">reset</button>
  <button id = "bt-Print">Print or Save as pdf</button>
</form>

Да, подходит идеально. Ты очень умный. Пытаюсь сейчас добавить пару кнопок для возможности сохранить документ и отправить по электронной почте. Если это не займет много времени и у вас есть несколько минут, пожалуйста, помогите мне и здесь. Большое спасибо

user3877540 09.04.2019 15:34

Не удается найти место, чтобы принять ответ. Ваше решение сработало хорошо

user3877540 11.04.2019 21:10
@user3877540 Я увидел, что вы дали ответ с большей информацией, поэтому я изменил свой ответ, интегрировав это, я также упростил режим заполнения таблицы и адаптировал стиль CSS, чтобы впечатление было более ясным. Я рад, что мое решение помогает вам, но я буду очень рад, если вы подтвердите мой ответ. Это тот тип возврата, который ждет здесь любой респондент, пожалуйста, не разочаровывайте их. meta.stackexchange.com/questions/5234/…
Mister Jojo 12.04.2019 23:59
<h4 style = "text-align:center;color:blue;"> Dr ABC<br> MYLocation</h4>

<form action = "" method = "get">
    <b> Enter Patient's Name :</b> <input type = "text"  /><br>
</form>
<h4> We are interested in knowing wheather you are having any difficulty with the 
 activities listed below <u> because of your upper limb problem </u>
for which <br> you are seeking attention. Provide an answer for each activity</h4>
<h4> Today, <u>do you or would you </u> have any difficulty with: (check boxes below 
on each line)</h4>
<style>table, td { border: 1px solid grey }
    td {
      text-align: center;
      min-width: 125px;
      max-width: 125px;
    }
    tr td:first-child {
      text-align: left;
      min-width: 350px;
      max-width: 350px;
    }
    thead td { font-weight: bold }
    #the-Sum {
      display: block;
      margin: 10px 0 0 20px;
      font-weight: bold;
      color:crimson;
}</style>
<form id = "the-Form">
<table>
<thead>
  <tr>
    <td>ACTIVITIES </td>
    <td>Extreme Difficulty or Unable to Perform Activity&nbsp;(0)</td>
    <td>Quite a Bit of Difficulty&nbsp;(1)</td>
    <td>Moderate Difficulty&nbsp;(2)</td>
    <td>A Little bit of Difficulty&nbsp;(3)</td>
    <td>No Difficulty&nbsp;(4)</td>
  </tr>
</thead>
<tbody>
  <tr>
    <td> Any of usual work, household, or school activities</td>
    <td><input type = "radio" name = "household" value = "0"></td>
    <td><input type = "radio" name = "household" value = "1"></td>
    <td><input type = "radio" name = "household" value = "2"></td>
    <td><input type = "radio" name = "household" value = "3"></td>
    <td><input type = "radio" name = "household" value = "4"></td>
  </tr>
  <tr>
    <td> Your usual hobbies, recreational, sporting activities</td>
    <td><input type = "radio" name = "hobbies" value = "0"></td>
    <td><input type = "radio" name = "hobbies" value = "1"></td>
    <td><input type = "radio" name = "hobbies" value = "2"></td>
    <td><input type = "radio" name = "hobbies" value = "3"></td>
    <td><input type = "radio" name = "hobbies" value = "4"></td>
  </tr>
  <tr>
    <td> Lifting bag of groceries to waist level</td>
    <td><input type = "radio" name = "groceryw" value = "0"></td>
    <td><input type = "radio" name = "groceryw" value = "1"></td>
    <td><input type = "radio" name = "groceryw" value = "2"></td>
    <td><input type = "radio" name = "groceryw" value = "3"></td>
    <td><input type = "radio" name = "groceryw" value = "4"></td>
  </tr>
  <tr>
    <td> Lifting a bag of groceries above your head </td>
    <td><input type = "radio" name = "groceryd" value = "0"></td>
    <td><input type = "radio" name = "groceryd" value = "1"></td>
    <td><input type = "radio" name = "groceryd" value = "2"></td>
    <td><input type = "radio" name = "groceryd" value = "3"></td>
    <td><input type = "radio" name = "groceryd" value = "4"></td>
  </tr>

  <tr>
    <td> Grooming your hair </td>
    <td><input type = "radio" name = "grooming" value = "0"></td>
    <td><input type = "radio" name = "grooming" value = "1"></td>
    <td><input type = "radio" name = "grooming" value = "2"></td>
    <td><input type = "radio" name = "grooming" value = "3"></td>
    <td><input type = "radio" name = "grooming" value = "4"></td>
  </tr>
  <tr>
    <td> Pushing up on your hands (e.g. from bathtub or chair) </td>
    <td><input type = "radio" name = "pushing" value = "0"></td>
    <td><input type = "radio" name = "pushing" value = "1"></td>
    <td><input type = "radio" name = "pushing" value = "2"></td>
    <td><input type = "radio" name = "pushing" value = "3"></td>
    <td><input type = "radio" name = "pushing" value = "4"></td>
  </tr>
  <tr>
    <td> Preparing food (e.g. peeling, cutting </td>
    <td><input type = "radio" name = "food" value = "0"></td>
    <td><input type = "radio" name = "food" value = "1"></td>
    <td><input type = "radio" name = "food" value = "2"></td>
    <td><input type = "radio" name = "food" value = "3"></td>
    <td><input type = "radio" name = "food" value = "4"></td>
  </tr>
  <tr>
    <td> Driving </td>
    <td><input type = "radio" name = "driving" value = "0"></td>
    <td><input type = "radio" name = "driving" value = "1"></td>
    <td><input type = "radio" name = "driving" value = "2"></td>
    <td><input type = "radio" name = "driving" value = "3"></td>
    <td><input type = "radio" name = "driving" value = "4"></td>
  </tr>
  <tr>
    <td> Vaccuming, sweeping, or raking </td>
    <td><input type = "radio" name = "cleaning" value = "0"></td>
    <td><input type = "radio" name = "cleaning" value = "1"></td>
    <td><input type = "radio" name = "cleaning" value = "2"></td>
    <td><input type = "radio" name = "cleaning" value = "3"></td>
    <td><input type = "radio" name = "cleaning" value = "4"></td>
  </tr>
  <tr>
    <td> Dressing </td>
    <td><input type = "radio" name = "dressing" value = "0"></td>
    <td><input type = "radio" name = "dressing" value = "1"></td>
    <td><input type = "radio" name = "dressing" value = "2"></td>
    <td><input type = "radio" name = "dressing" value = "3"></td>
    <td><input type = "radio" name = "dressing" value = "4"></td>
  </tr>
  <tr>
    <td> Doing up buttons </td>
    <td><input type = "radio" name = "dbuttons" value = "0"></td>
    <td><input type = "radio" name = "dbuttons" value = "1"></td>
    <td><input type = "radio" name = "dbuttons" value = "2"></td>
    <td><input type = "radio" name = "dbuttons" value = "3"></td>
    <td><input type = "radio" name = "dbuttons" value = "4"></td>
  </tr>
  <tr>
    <td> Using tools or appliances</td>
    <td><input type = "radio" name = "appliance" value = "0"></td>
    <td><input type = "radio" name = "appliance" value = "1"></td>
    <td><input type = "radio" name = "appliance" value = "2"></td>
    <td><input type = "radio" name = "appliance" value = "3"></td>
    <td><input type = "radio" name = "appliance" value = "4"></td>
  </tr>
  <tr>
    <td> Opening doors </td>
    <td><input type = "radio" name = "doors" value = "0"></td>
    <td><input type = "radio" name = "doors" value = "1"></td>
    <td><input type = "radio" name = "doors" value = "2"></td>
    <td><input type = "radio" name = "doors" value = "3"></td>
    <td><input type = "radio" name = "doors" value = "4"></td>
  </tr>
  <tr>
    <td> Cleaning </td>
    <td><input type = "radio" name = "cleaning1" value = "0"></td>
    <td><input type = "radio" name = "cleaning1" value = "1"></td>
    <td><input type = "radio" name = "cleaning1" value = "2"></td>
    <td><input type = "radio" name = "cleaning1" value = "3"></td>
    <td><input type = "radio" name = "cleaning1" value = "4"></td>
  </tr>
  <tr>
    <td> Tying or lacing shoes</td>
    <td><input type = "radio" name = "shoes" value = "0"></td>
    <td><input type = "radio" name = "shoes" value = "1"></td>
    <td><input type = "radio" name = "shoes" value = "2"></td>
    <td><input type = "radio" name = "shoes" value = "3"></td>
    <td><input type = "radio" name = "shoes" value = "4"></td>
  </tr>
  <tr>
    <td> Sleeping</td>
    <td><input type = "radio" name = "sleep" value = "0"></td>
    <td><input type = "radio" name = "sleep" value = "1"></td>
    <td><input type = "radio" name = "sleep" value = "2"></td>
    <td><input type = "radio" name = "sleep" value = "3"></td>
    <td><input type = "radio" name = "sleep" value = "4"></td>
  </tr>
  <tr>
    <td> Laundering cloths (e.g. washing, ironing, folding)</td>
    <td><input type = "radio" name = "laundry" value = "0"></td>
    <td><input type = "radio" name = "laundry" value = "1"></td>
    <td><input type = "radio" name = "laundry" value = "2"></td>
    <td><input type = "radio" name = "laundry" value = "3"></td>
    <td><input type = "radio" name = "laundry" value = "4"></td>
  </tr>
  <tr>
    <td>Opening a jar</td>
    <td><input type = "radio" name = "jar" value = "0"></td>
    <td><input type = "radio" name = "jar" value = "1"></td>
    <td><input type = "radio" name = "jar" value = "2"></td>
    <td><input type = "radio" name = "jar" value = "3"></td>
    <td><input type = "radio" name = "jar" value = "4"></td>
  </tr>
  <tr>
    <td> Throwing a ball </td>
    <td><input type = "radio" name = "ball" value = "0"></td>
    <td><input type = "radio" name = "ball" value = "1"></td>
    <td><input type = "radio" name = "ball" value = "2"></td>
    <td><input type = "radio" name = "ball" value = "3"></td>
    <td><input type = "radio" name = "ball" value = "4"></td>
  </tr>
  <tr>
    <td> Carrying a small suitcase with affected limb </td>
    <td><input type = "radio" name = "carrying" value = "0"></td>
    <td><input type = "radio" name = "carrying" value = "1"></td>
    <td><input type = "radio" name = "carrying" value = "2"></td>
    <td><input type = "radio" name = "carrying" value = "3"></td>
    <td><input type = "radio" name = "carrying" value = "4"></td>
  </tr>
</tbody>
</table>

<output id = "the-Sum"> total = 0 </output>
</form>
<script>
    const
  theForm         = document.querySelector('#the-Form'),
  theTotal        = document.querySelector('#the-Sum'),
  List_RadioGroup = [ 'household', 'hobbies', 'groceryw', 'groceryd', 'grooming', 'pushing', 'food', 'driving', 'cleaning', 'dressing', 'dbuttons', 'appliance', 'doors', 'cleaning1', 'shoes', 'sleep', 'laundry', 'jar', 'ball', 'carrying']
  ;

// load init.
theTotal.textContent = ' total = 0 ';
List_RadioGroup.forEach(xElm=>{ theForm[xElm][0].checked = true; })


theForm.onchange = function()
{
  let total = 0;
  List_RadioGroup.forEach(xElm=>{
    total += parseInt( document.querySelector(`input[name = "${xElm}"]:checked`).value );
  })
  theTotal.textContent = ` TOTAL OUT OF 80 = ${total} `;
}
</script>
<div><form>
<input type = "button" value = "Print or Save as pdf" onClick = "window.print()">
</form></div>

Другие вопросы по теме