Jump to content

Ошибка в коде калькулятора


Recommended Posts

Хочу сделать калькулятор для вычисление индекса массы тела (ИМТ). Но в данный момент у меня в коде ошибка, помогите найти её.

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <style>
    .error input{
      border: 1px solid red;
    }
    .error {
      color: red;
    }
  </style>
</head>
 
<body>
<span >
                            Ваш индекс массы тела (ИМТ) равен:
                        </span>
                       <div id="Summ"></div>
                   
 
    
        <div class="block_content">
 
            <form>
            <table align="center" class="content_fields">
                <tr>
                    <td align="center" colspan="2" style="padding-bottom: 10px;">
                        <h2>Введите ваши параметры для расчета индекса массы тела</h2>
                    </td>
                </tr>
                <tr>
                    <td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
                        Пол:
                    </td>
                    <td align="left" width="50%" style="padding-left: 5px; padding-bottom: 5px;">
                        <input type="radio" name="sex" value="M" checked="checked"/> 
                        <label for="sexMale"><span></span> Мужской</label>
                        <input type="radio" name="sex" value="F" id="sexFem" class="rad" /> 
                        <label for="sexFem"><span></span> Женский</label>
                    </td>
                </tr>
<tr>
<td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
                        возраст
                    </td>
<td>
<div class="select_block" style="width: 118px;">
                            <select name="height_eng" id="height_eng">
                                                                <option value="4.0">19-24 года</option>
                                                                <option value="4.1">25-34 года</option>
                                                                <option value="4.2">35-44 года</option>
                                                                <option value="4.3">45-54 года</option>
                                                                <option value="4.4">после 55 лет</option>
                                                               
                                                                                            </select>
                            </div>
</td>
</tr>
                <tr>
                    <td align="right" width="50%" style="padding-right: 5px;">
                        Вес:
                    </td>
                    <td align="left" width="50%" style="padding-left: 5px;">
                        <input type="text" name="weight" style="width: 120px;" maxlength="3" id="weight" />
                                                  
                    </td>
                </tr>
                
                <tr>
                    <td align="right" width="50%" style="padding-right: 5px;">
                        Рост:
                    </td>
                    <td align="left" width="50%" style="padding-left: 5px;">
                        <div style="float: left;">
                            <input type="text" name="height" style="width: 120px;" maxlength="4" id="height"  >
                            </input>
                        </div>
                         
                    </td>
                </tr>
                <tr>
                    <td align="center"  colspan="2" style="padding-top: 10px;">  
                        <input type="submit"  onClick="validate(this.form)" value="Рассчитать индекс массы тела" />
                    </td>
                </tr>
 
            </table>
            </form>
            
        </div>
<script>
    function showError(container, errorMessage) {
      container.className = 'error';
      var msgElem = document.createElement('span');
      msgElem.className = "error-message";
      msgElem.innerHTML = errorMessage;
      container.appendChild(msgElem);
    }
 
    function resetError(container) {
      container.className = '';
      if (container.lastChild.className == "error-message") {
        container.removeChild(container.lastChild);
      }
    }
 
    function validate(form) {
      var elems = form.elements;
var k=0;
      resetError(elems.weight.parentNode);
      if (!elems.weight.value) { k=1;
        showError(elems.weight.parentNode, ' введите вес');
      }
 
      resetError(elems.height.parentNode);
      if (!elems.height.value) {k=1;
        showError(elems.height.parentNode, ' введите рост');
      }
if (k==0)
{
 index_mas=parseFloat(elems.weight.value)/(parseFloat(elems.weight.value)*parseFloat(elems.weight.value));
  var SummDok = document.getElementById('Summ');
SummDok.innerHTML = index_mas;
 }
      }
</script>
</body>
 
</html>

 

Link to post
Share on other sites

Есть вопрос? Задай его профессиональным веб-мастерам, SEO и другим специалистам!

Смените submit на button

И у вас еще ошибка в формуле! У вас Вес делить на Вес*2, а должно быть Вес делить на Рост*2(в метрах)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .error input{
      border: 1px solid red;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
        <div class="block_content">
 
            <form>
            <table align="center" class="content_fields">
                <tr>
                    <td align="center" colspan="2" style="padding-bottom: 10px;">
                        <h2>Введите ваши параметры для расчета индекса массы тела</h2>
                    </td>
                </tr>
                <tr>
                    <td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
                        Пол:
                    </td>
                    <td align="left" width="50%" style="padding-left: 5px; padding-bottom: 5px;">
                        <input type="radio" name="sex" value="M" checked="checked"/> 
                        <label for="sexMale"><span></span> Мужской</label>
                        <input type="radio" name="sex" value="F" id="sexFem" class="rad" /> 
                        <label for="sexFem"><span></span> Женский</label>
                    </td>
                </tr>
<tr>
<td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
                        возраст
                    </td>
<td>
<div class="select_block" style="width: 118px;">
                            <select name="height_eng" id="height_eng">
                                                                <option value="4.0">19-24 года</option>
                                                                <option value="4.1">25-34 года</option>
                                                                <option value="4.2">35-44 года</option>
                                                                <option value="4.3">45-54 года</option>
                                                                <option value="4.4">после 55 лет</option>
                                                               
                                                                                            </select>
                            </div>
</td>
</tr>
                <tr>
                    <td align="right" width="50%" style="padding-right: 5px;">
                        Вес:
                    </td>
                    <td align="left" width="50%" style="padding-left: 5px;">
                        <input type="text" name="weight" style="width: 120px;" maxlength="3" id="weight" />
                                                  
                    </td>
                </tr>
                
                <tr>
                    <td align="right" width="50%" style="padding-right: 5px;">
                        Рост:
                    </td>
                    <td align="left" width="50%" style="padding-left: 5px;">
                        <div style="float: left;">
                            <input type="text" name="height" style="width: 120px;" maxlength="4" id="height"  >
                            </input>
                        </div>
                         
                    </td>
                </tr>
                <tr>
                    <td align="center"  colspan="2" style="padding-top: 10px;">  
                        <input type="button"  onClick="validate(this.form)" value="Рассчитать индекс массы тела" />
                    </td>
                </tr>
 <tr>
                    <td align="center"  colspan="2" style="padding-top: 10px;">  
<span >
Ваш индекс массы тела (ИМТ) равен:
</span><div id="Summ"></div>
   </td>
                </tr>
 
            </table>
            </form>
            
        </div>
<script>
    function showError(container, errorMessage) {
      container.className = 'error';
      var msgElem = document.createElement('span');
      msgElem.className = "error-message";
      msgElem.innerHTML = errorMessage;
      container.appendChild(msgElem);
    }
 
    function resetError(container) {
      container.className = '';
      if (container.lastChild.className == "error-message") {
        container.removeChild(container.lastChild);
      }
    }
 
    function validate(form) {
      var elems = form.elements;
var k=0;
      resetError(elems.weight.parentNode);
      if (!elems.weight.value) { k=1;
        showError(elems.weight.parentNode, ' введите вес');
      }
 
      resetError(elems.height.parentNode);
      if (!elems.height.value) {k=1;
        showError(elems.height.parentNode, ' введите рост');
      }
if (k==0)
{
 index_mas=parseFloat(elems.weight.value)/((parseFloat(elems.height.value)/100)*(parseFloat(elems.height.value)/100));
  var SummDok = document.getElementById('Summ');
SummDok.innerHTML = index_mas;
 }
      }
</script>
</body>
 
</html>
Edited by tvskit
Link to post
Share on other sites
  • VIP

Вам просто нужно отменить действие по умолчанию у формы, то есть отправку данных. Вот подредактировано:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .error input{
      border: 1px solid red;
      }
      .error {
      color: red;
      }
    </style>
  </head>
  <body>
    <span >
    Ваш индекс массы тела (ИМТ) равен:
    </span>
    <div id="Summ"></div>
    <div class="block_content">
      <form>
        <table align="center" class="content_fields">
          <tr>
            <td align="center" colspan="2" style="padding-bottom: 10px;">
              <h2>Введите ваши параметры для расчета индекса массы тела</h2>
            </td>
          </tr>
          <tr>
            <td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
              Пол:
            </td>
            <td align="left" width="50%" style="padding-left: 5px; padding-bottom: 5px;">
              <input type="radio" name="sex" value="M" checked="checked"/> 
              <label for="sexMale"><span></span> Мужской</label>
              <input type="radio" name="sex" value="F" id="sexFem" class="rad" /> 
              <label for="sexFem"><span></span> Женский</label>
            </td>
          </tr>
          <tr>
            <td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
              возраст
            </td>
            <td>
              <div class="select_block" style="width: 118px;">
                <select name="height_eng" id="height_eng">
                  <option value="4.0">19-24 года</option>
                  <option value="4.1">25-34 года</option>
                  <option value="4.2">35-44 года</option>
                  <option value="4.3">45-54 года</option>
                  <option value="4.4">после 55 лет</option>
                </select>
              </div>
            </td>
          </tr>
          <tr>
            <td align="right" width="50%" style="padding-right: 5px;">
              Вес:
            </td>
            <td align="left" width="50%" style="padding-left: 5px;">
              <input type="text" name="weight" style="width: 120px;" maxlength="3" id="weight" />
            </td>
          </tr>
          <tr>
            <td align="right" width="50%" style="padding-right: 5px;">
              Рост:
            </td>
            <td align="left" width="50%" style="padding-left: 5px;">
              <div style="float: left;">
                <input type="text" name="height" style="width: 120px;" maxlength="4" id="height"  >
                </input>
              </div>
            </td>
          </tr>
          <tr>
            <td align="center"  colspan="2" style="padding-top: 10px;">  
              <input type="submit"  onClick="validate(this.form, event)" value="Рассчитать индекс массы тела" />
            </td>
          </tr>
        </table>
      </form>
    </div>
    <script>
      function showError(container, errorMessage) {
        container.className = 'error';
        var msgElem = document.createElement('span');
        msgElem.className = "error-message";
        msgElem.innerHTML = errorMessage;
        container.appendChild(msgElem);
      }
      
      function resetError(container) {
        container.className = '';
        if (container.lastChild.className == "error-message") {
          container.removeChild(container.lastChild);
        }
      }
      
      function validate(form, event) {
        event.preventDefault();
        var elems = form.elements;
        var k=0;
        resetError(elems.weight.parentNode);
        if (!elems.weight.value) { k=1;
          showError(elems.weight.parentNode, ' введите вес');
        }
      
        resetError(elems.height.parentNode);
        if (!elems.height.value) {k=1;
          showError(elems.height.parentNode, ' введите рост');
        }
        if (k==0){
          index_mas=parseFloat(elems.weight.value)/(parseFloat(elems.weight.value)*parseFloat(elems.weight.value));
          var SummDok = document.getElementById('Summ');
          SummDok.innerHTML = index_mas;
         }
      }
    </script>
  </body>
</html>
Link to post
Share on other sites

 

Вам просто нужно отменить действие по умолчанию у формы, то есть отправку данных. Вот подредактировано:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .error input{
      border: 1px solid red;
      }
      .error {
      color: red;
      }
    </style>
  </head>
  <body>
    <span >
    Ваш индекс массы тела (ИМТ) равен:
    </span>
    <div id="Summ"></div>
    <div class="block_content">
      <form>
        <table align="center" class="content_fields">
          <tr>
            <td align="center" colspan="2" style="padding-bottom: 10px;">
              <h2>Введите ваши параметры для расчета индекса массы тела</h2>
            </td>
          </tr>
          <tr>
            <td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
              Пол:
            </td>
            <td align="left" width="50%" style="padding-left: 5px; padding-bottom: 5px;">
              <input type="radio" name="sex" value="M" checked="checked"/> 
              <label for="sexMale"><span></span> Мужской</label>
              <input type="radio" name="sex" value="F" id="sexFem" class="rad" /> 
              <label for="sexFem"><span></span> Женский</label>
            </td>
          </tr>
          <tr>
            <td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
              возраст
            </td>
            <td>
              <div class="select_block" style="width: 118px;">
                <select name="height_eng" id="height_eng">
                  <option value="4.0">19-24 года</option>
                  <option value="4.1">25-34 года</option>
                  <option value="4.2">35-44 года</option>
                  <option value="4.3">45-54 года</option>
                  <option value="4.4">после 55 лет</option>
                </select>
              </div>
            </td>
          </tr>
          <tr>
            <td align="right" width="50%" style="padding-right: 5px;">
              Вес:
            </td>
            <td align="left" width="50%" style="padding-left: 5px;">
              <input type="text" name="weight" style="width: 120px;" maxlength="3" id="weight" />
            </td>
          </tr>
          <tr>
            <td align="right" width="50%" style="padding-right: 5px;">
              Рост:
            </td>
            <td align="left" width="50%" style="padding-left: 5px;">
              <div style="float: left;">
                <input type="text" name="height" style="width: 120px;" maxlength="4" id="height"  >
                </input>
              </div>
            </td>
          </tr>
          <tr>
            <td align="center"  colspan="2" style="padding-top: 10px;">  
              <input type="submit"  onClick="validate(this.form, event)" value="Рассчитать индекс массы тела" />
            </td>
          </tr>
        </table>
      </form>
    </div>
    <script>
      function showError(container, errorMessage) {
        container.className = 'error';
        var msgElem = document.createElement('span');
        msgElem.className = "error-message";
        msgElem.innerHTML = errorMessage;
        container.appendChild(msgElem);
      }
      
      function resetError(container) {
        container.className = '';
        if (container.lastChild.className == "error-message") {
          container.removeChild(container.lastChild);
        }
      }
      
      function validate(form, event) {
        event.preventDefault();
        var elems = form.elements;
        var k=0;
        resetError(elems.weight.parentNode);
        if (!elems.weight.value) { k=1;
          showError(elems.weight.parentNode, ' введите вес');
        }
      
        resetError(elems.height.parentNode);
        if (!elems.height.value) {k=1;
          showError(elems.height.parentNode, ' введите рост');
        }
        if (k==0){
          index_mas=parseFloat(elems.weight.value)/(parseFloat(elems.weight.value)*parseFloat(elems.weight.value));
          var SummDok = document.getElementById('Summ');
          SummDok.innerHTML = index_mas;
         }
      }
    </script>
  </body>
</html>

Спасибо большое.

Link to post
Share on other sites

В коде campusboy ошибка делении веса на вес*2 = не верно считает ИМТ
 

Вот вам код не пожалеете, вставите поймёте всё, чем от вашего отличается и можете его уже до оформить

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <style>
 .error input{
 border: 1px solid red;
 }
 .error {
 color: red;
 }
 </style>
</head>
<body>
 <div class="block_content">
 
 <form>
 <table align="center" class="content_fields">
 <tr>
 <td align="center" colspan="2" style="padding-bottom: 10px;">
 <h2>Введите ваши параметры для расчета индекса массы тела</h2>
 </td>
 </tr>
 <tr>
 <td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
 Пол:
 </td>
 <td align="left" width="50%" style="padding-left: 5px; padding-bottom: 5px;">
 <input type="radio" name="sex" value="M" checked="checked"/> 
 <label for="sexMale"><span></span> Мужской</label>
 <input type="radio" name="sex" value="F" id="sexFem" class="rad" /> 
 <label for="sexFem"><span></span> Женский</label>
 </td>
 </tr>
<tr>
<td align="right" width="50%" style="padding-right: 5px; padding-top: 5px;">
 возраст
 </td>
<td>
<div class="select_block" style="width: 118px;">
 <select name="height_eng" id="height_eng">
 <option value="4.0">19-24 года</option>
 <option value="4.1">25-34 года</option>
 <option value="4.2">35-44 года</option>
 <option value="4.3">45-54 года</option>
 <option value="4.4">после 55 лет</option>
 
 </select>
 </div>
</td>
</tr>
 <tr>
 <td align="right" width="50%" style="padding-right: 5px;">
 Вес:
 </td>
 <td align="left" width="50%" style="padding-left: 5px;">
 <input type="text" name="weight" style="width: 120px;" maxlength="3" id="weight" />
 
 </td>
 </tr>
 
 <tr>
 <td align="right" width="50%" style="padding-right: 5px;">
 Рост:
 </td>
 <td align="left" width="50%" style="padding-left: 5px;">
 <div style="float: left;">
 <input type="text" name="height" style="width: 120px;" maxlength="4" id="height" >
 </input>
 </div>
 
 </td>
 </tr>
 <tr>
 <td align="center" colspan="2" style="padding-top: 10px;"> 
 <input type="button" onClick="validate(this.form)" value="Рассчитать индекс массы тела" />
 </td>
 </tr>
 <tr>
 <td align="center" colspan="2" style="padding-top: 10px;"> 
<span >
Ваш индекс массы тела (ИМТ) равен:
</span><div id="Summ"></div>
 </td>
 </tr>
 
 </table>
 </form>
 
 </div>
<script>
 function showError(container, errorMessage) {
 container.className = 'error';
 var msgElem = document.createElement('span');
 msgElem.className = "error-message";
 msgElem.innerHTML = errorMessage;
 container.appendChild(msgElem);
 }
 
 function resetError(container) {
 container.className = '';
 if (container.lastChild.className == "error-message") {
 container.removeChild(container.lastChild);
 }
 }
 
 function validate(form) {
 var elems = form.elements;
var k=0;
 resetError(elems.weight.parentNode);
 if (!elems.weight.value) { k=1;
 showError(elems.weight.parentNode, ' введите вес');
 }
 
 resetError(elems.height.parentNode);
 if (!elems.height.value) {k=1;
 showError(elems.height.parentNode, ' введите рост');
 }
if (k==0)
{
 index_mas=Math.round(parseFloat(elems.weight.value)/((parseFloat(elems.height.value)/100)*(parseFloat(elems.height.value)/100)));
 var SummDok = document.getElementById('Summ');

if (index_mas< 15) {
 SummDok.innerHTML = index_mas  + ' <div> У Вас острый дефицит веса!</div>';
 } else if ((index_mas >= 15) && (index_mas < 20)) {
 SummDok.innerHTML = index_mas + ' <div> У Вас дефицит веса!</div>';
 } else if ((index_mas >= 20) && (index_mas < 25)) {
 SummDok.innerHTML = index_mas + ' <div> У Вас нормальный вес.</div>';
 } else if ((index_mas >= 25) && (index_mas < 30)) {
 SummDok.innerHTML = index_mas + '<div> У Вас избыток веса!</div>';
 } else {
 SummDok.innerHTML = index_mas + ' <div style="font-size:22px;">- Да вы житробасссссс!!!</div>';
 }
 }
 }
</script>
</body>
 
</html>
Link to post
Share on other sites

 

В коде campusboy ошибка делении веса на все*2 = не верно считает ИМТ

 

Вот вам код не пожалеете, поймёте всё вставите, чем от вашего отличается и можете его еже дооформить

<!Элемент doctype HTML>в
<HTML>и
<глава>
 <Мета атрибут charset="Кодировка utf-8">
<стиль>
 .ошибки ввода{
 границы: 1px твердых красный;
}
 .ошибка {
 цвет: красный;
}
</стиль>
тегом </Head>
<тело>
 <див класс="block_content">

<форма>
 <Таблица выровняйте="центр" класс="content_fields">
<тр>
 <тд выровняйте="центр" атрибуты colspan="2" стиль="обивка-дно: 10px;">
 <Н2>Введите ваши параметры для расчета индекса массы тела</Н2>
</тd>
</тр>
<тр>
 <тд выровняйте="право" Ширина="50%" стиль="обивка направо: 5 пикселей; обивка-топ: 5 пикселей;">
Пол:
</тd>
 <тд присоединяются="левой" Ширина="50%" стиль="обивка-слева: 5 пикселей; обивка-вниз: 5 пикселей;">
 <входной Тип="радио" имя="пол" значение="М" проверил="проверено"/> 
 <метка для="sexMale"><промежуток></пролет> Мужской</метка>
 <входной Тип="радио" имя="пол" значение="Ф" идентификатор="sexFem" класс="рад" /> 
 <метка для="sexFem"><промежуток></пролет> Женский</метка>
</тd>
</тр>
<тр>
<тд выровняйте="право" Ширина="50%" стиль="обивка направо: 5 пикселей; обивка-топ: 5 пикселей;">
возраст
</тd>
<тd>
<див класс="select_block" стиль="Ширина: 118px;">
 <выберите имя="height_eng" идентификатор="height_eng">
 <параметр значение="4.0">19-24 года</опции>
 <параметр значение="4.1">25-34 года</опции>
 <параметр значение="4.2">35-44 года</опции>
 <значение опции="4.3">45-54 года</опции>
 <значение опции="4.4">после вариант 55 лет</>

</выберите>
</див>
</тd>
</тр>
<тр>
 <тд выровняйте="право" Ширина="50%" стиль="обивка направо: 5 пикселей;">
Вес:
</тd>
 <тд присоединяются="левой" Ширина="50%" стиль="обивка-слева: 5 пикселей;">
 <входной Тип="текст" имя="вес" стиль="Ширина: 120px;" свойство maxlength="3" идентификатор="вес" />

</тd>
</тр>

<тр>
 <тд выровняйте="право" Ширина="50%" стиль="обивка направо: 5 пикселей;">
Рост:
</тd>
 <тд присоединяются="левой" Ширина="50%" стиль="обивка-слева: 5 пикселей;">
 <div стиль="плавать: слева;">
 <Тип входного="текст" имя="высота" стиль="Ширина: 120px;" параметр maxlength="4" идентификатор="высота" >
</вход>
</див>

</тd>
</тр>
<тр>
 <тд выровняйте="центр" атрибуты colspan="2" стиль="обивка-топ: еще 10;"> 
 <Тип входного="кнопка" функция onclick="проверить(это.форма)" значение="Рассчитать индекс массы тела" />
</тd>
</тр>
<тр>
 <тд выровняйте="центр" атрибуты colspan="2" стиль="обивка-топ: еще 10;"> 
<охватывают >
Ваш индекс массы тела (ИМТ) равен:
на </span><див ИД="содержание"></дел>
</тd>
</тр>

</Таблица>
</форма>

</див>
<скрипт>
 функция showError(контейнер, сообщение) {
 контейнер.ошибка параметр classname='';
 вар msgElem = документ.метод createelement('пядь');
 msgElem.имякласса = "ошибка-сообщение";
 msgElem.использование innerhtml = сообщение;
контейнер.метода appendchild(msgElem);
}

 функция resetError(контейнер) {
 контейнер.имя classname = ";
 если (контейнер.lastChild.имя classname == "ошибка-сообщение") {
контейнер.метода removechild(контейнер.lastChild);
}
}

 функция проверки(форма) {
 элемс вар = форма.элементов;
вар к=0;
resetError(элемс.вес.parentNode);
 если (!элемс.вес.значение) { к=1;
 showError(элемс.вес.parentNode, 'введите вес');
}

resetError(элемс.высота.parentNode);
 если (!элемс.высота.значение) {к=1;
 showError(элемс.высота.parentNode, 'введите рост');
}
если (к==0)
{
 index_mas=Math.round(parseFloat(elems.weight.value)/((parseFloat(elems.height.value)/100)*(parseFloat(элемс.высота.значение)/100)));
 вар SummDok = документ.метода getelementbyid('сумма');

если (index_mas< 15) {
 SummDok.использование innerhtml = index_mas + ' <див> У Вас острый дефицит веса!</див>';
 } иначе если ((index_mas >= 15) && (index_mas < 20)) {
 SummDok.использование innerhtml = index_mas + ' <див> У Вас дефицит веса!</див>';
 } иначе если ((index_mas >= 20) && (index_mas < 25)) {
 SummDok.использование innerhtml = index_mas + ' <див> У Вас нормальный вес.</див>';
 } иначе если ((index_mas >= 25) && (index_mas < 30)) {
 SummDok.использование innerhtml = index_mas + '<див> У Вас избыток веса!</див>';
 } еще {
 SummDok.использование innerhtml = index_mas + ' <div стиль="размер шрифта:22px;">- Да вы житробасссссс!!!</див>';
}
}
}
</скрипт>
и </Body>

</HTML>в

Спасибо большое.

Link to post
Share on other sites

На здоровье, только все цифры ИМТ перепроверьте.

Хорошо, я его еще полностью переделывать буду, потому что мне нужно:

1. Выбрать пол;

2.Выбрать возраст;

3. Написать рост;

4. Написать вес;

 

И в зависимости от 1 и 2 будет выдаваться сообщение в котором будет прописываться состояние ИТМ человека.

Link to post
Share on other sites

Из-за таких речей порождается ложь и клевета.

 

Оскорбить вас не хотел, там ошибка не ваша, имелось ввиду про формулу, я напомнил перед этим постом, а потом и после этого(ваш).

 

Потом могли написать что у вас не правильно считает!!! :D А им уже воспользовалось тысяча людей.

Link to post
Share on other sites
  • VIP

Оскорбить вас не хотел, там ошибка не ваша, имелось ввиду про формулу, я напомнил перед этим постом, а потом и после этого(ваш).

 

Потом могли написать что у вас не правильно считает!!! :D А им уже воспользовалось тысяча людей.

 

Потому выкладываю код, как я вижу этот калькулятор, по просьбе ТС (в личку написал техзадание, так сказать).

 

Сразу замечу, что в прилагаемом источнике ( ifeelstrong.ru/anatomy/body/indeks-massy-tela.html ) даются данные ИМТ относительно возраста в одной таблице и в ней учтены промежуток ОТ и ДО как по ИМТ, так и по возрасту, а относительно пола промежутки только по возрасту и только точное значение ИМТ. ТС попросил именно по второму варианту, но я считаю его не совсем корректным, так как обладателей точного значение ИМТ будет мало, в большинстве случаев человек будет получать результат "дефицит массы" или "избыток".

 

Так как я привык всё писать отдельно (html. css. js), то и код для разного типа данных в разных файлах.

 

HTML (файл index.html)

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Индекс массы тела для мужчин и женщин</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>

    <h1>Калькулятор расчёта индекса массы тела для мужчин и женщин</h1>
    
    <div class="calculator_imt">
      <h2>Введите ваши параметры для расчета индекса массы тела</h2>
      
      <form>

        <!-- Выбор пола -->
        <div class="gender calc-block">
          <div class="left-side">Пол:</div>
          <div class="right-side">
             <input type="radio" name="sex" value="M" id="sexMale" checked="checked"/> 
             <label for="sexMale">Мужской</label>
             <input type="radio" name="sex" value="F" id="sexFem" />
             <label for="sexFem">Женский</label>
          </div>
        </div>

        <!-- Выбор возраста -->
        <div class="age calc-block">
          <div class="left-side"><label for="select-age">Возраст:</label></div>
          <div class="right-side">
            <select name="select-age" id="select-age">
              <option data-f="19.5" data-m="21.4" value="">19-24 года</option>
              <option data-f="23.2" data-m="21.6" value="">25-34 года</option>
              <option data-f="23.4" data-m="22.9" value="">35-44 года</option>
              <option data-f="25.2" data-m="25.8" value="">45-54 года</option>
              <option data-f="27.3" data-m="26.6" value="">после 55 лет</option>
            </select>
          </div>
        </div>
        
        <!-- Ввод веса -->
        <div class="weight calc-block">
          <div class="left-side">
            <label for="weight-in">Вес:</label>
          </div>
          <div class="right-side">
            <input type="number" name="weight" id="weight-in" placeholder="в килограммах" required />
          </div>
        </div>

        <!-- Ввод роста -->
        <div class="height calc-block">
          <div class="left-side">
            <label for="height-in">Рост:</label>
          </div>
          <div class="right-side">
            <input type="number" name="height" id="height-in" placeholder="в сантиметрах" required=/>
          </div>
        </div>
        
        <div class="calc-btn calc-block">
          <input type="submit" value="Рассчитать индекс массы тела" />
        </div>
        
      </form>
      
      <!-- Вывод результата -->
      <div class="calc-result"></div>
     
    </div>
   
  </body>
</html>

Javascript (файл script.js)

$(document).ready(function(){
 
  // Берем весь блок в переменную для последующей более быстрой работой с ним
  var calcBlock = $('.calculator_imt');
  
  // Следим за формой и начинаем обрабатывать результат только по событию submit (нажатие кнопки или нажатие Enter в поле)
  $('form', calcBlock).submit(function(event){
    
    // Отменяем действия формы по умолчанию (не перезагружаем страницу при подсчёте)
    event.preventDefault();

    ////// ПОЛУЧАЕМ ДАННЫЕ, с которыми потом будем работать
    
    // Значение ПОЛа
    var calcGender = $('[name = sex]:checked', calcBlock).val();
    // Значение ВОЗРАСТа
    var calcAge = $('[name = select-age]', calcBlock);
    // Значение ИМТ для ЖЕНЩИНЫ выбранного возраста
    var imtF = $(':selected', calcAge).data('f');
    // Значение ИМТ для МУЖЧИНЫ выбранного возраста
    var imtM = $(':selected', calcAge).data('m');
    // Значение ВЕСа
    var calcWeight = $('[name = weight]', calcBlock).val();
    // Значение РОСТа
    var calcHeight = $('[name = height]', calcBlock).val();
    
    ////// РАССЧИТЫВАЕМ имт ( m/h*h, где m - масса тела человека в килограммах, а h - рост человека в метрах )
    // Считываем оптимальный имп относительно возраста и пола
    var itmOptimal = ( calcGender == 'F' ) ? imtF : imtM;
    // Сама формула расчёта
    var myIMT = +( calcWeight / ( ( calcHeight * calcHeight / 10000 ) ) ).toFixed(1);
    // Начальная фраза при выводе результата на экран (далее в зависимости от результата сравнения она будет дополнена)
    var message = 'При Вашем росте ' + calcHeight + ' см и весом ' + calcWeight + ' кг ИМД равен ' + myIMT + ', а это значит, что у Вас ';
    
    ////// СРАВНИВАЕМ полученный имт человека с введенными им параметрами и оптимальными для него
    if ( myIMT < itmOptimal ) message += 'наблюдается дефицит массы. Рекомендуется ИМД равный ' + itmOptimal + '. Обычно дефицит массы связан с хроническими заболеваниями, нарушениями питания, нервными недомоганиями, а так же анорексией.';
    else if ( myIMT == itmOptimal ) message += 'нормальная масса. Рекомендуется ИМД равный ' + itmOptimal + '. Нормальная масса тела характеризует здоровый вес, необходимый для полноценной жизнедеятельности организма.';
    else if ( myIMT > itmOptimal ) message += 'избыток масса тела. Рекомендуется ИМД равный ' + itmOptimal + '. Избыточная масса тела увеличивает риск возникновения сердечнососудистых заболеваний и увеличивает нагрузку на все органы. При таком показателе ИМТ желательно придерживаться диеты и получать аэробные нагрузки, чтобы довести ИМТ до нормальных значений.';
    else message = 'Мы не смогли рассчитать для Вас ИМТ.';
    
    ////// ВЫВОДИМ на экран результат вычислений и общий вывод
    $('.calc-result').text( message );
    
  });
  
});

CSS (файл style.css)

.calculator_imt h2 {
 text-align: center;
}

.calculator_imt form {
 width: 500px;
 margin: 0 auto;
}

.left-side, .right-side {
 display: inline-block;
 vertical-align: top;
}

.left-side {
 width: 185px;
 padding: 5px 10px 5px 0;
 text-align: right;
}

.right-side {
 width: 300px;
}

.calculator_imt input {
 padding: 2px 5px;
}

.calc-btn.calc-block {
  text-align: center;
}

Прошу заметить, что я использую библиотеку jQuery, так как она следит за относительной кроссбраузерностью. Вторая причина - я плоховато знаю ванильный js.

Link to post
Share on other sites

Потому выкладываю код, как я вижу этот калькулятор, по просьбе ТС (в личку написал техзадание, так сказать).

 

Сразу замечу, что в прилагаемом источнике ( ifeelstrong.ru/anatomy/body/indeks-massy-tela.html ) даются данные ИМТ относительно возраста в одной таблице и в ней учтены промежуток ОТ и ДО как по ИМТ, так и по возрасту, а относительно пола промежутки только по возрасту и только точное значение ИМТ. ТС попросил именно по второму варианту, но я считаю его не совсем корректным, так как обладателей точного значение ИМТ будет мало, в большинстве случаев человек будет получать результат "дефицит массы" или "избыток".

 

Так как я привык всё писать отдельно (html. css. js), то и код для разного типа данных в разных файлах.

 

HTML (файл index.html)

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Индекс массы тела для мужчин и женщин</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>

    <h1>Калькулятор расчёта индекса массы тела для мужчин и женщин</h1>
    
    <div class="calculator_imt">
      <h2>Введите ваши параметры для расчета индекса массы тела</h2>
      
      <form>

        <!-- Выбор пола -->
        <div class="gender calc-block">
          <div class="left-side">Пол:</div>
          <div class="right-side">
             <input type="radio" name="sex" value="M" id="sexMale" checked="checked"/> 
             <label for="sexMale">Мужской</label>
             <input type="radio" name="sex" value="F" id="sexFem" />
             <label for="sexFem">Женский</label>
          </div>
        </div>

        <!-- Выбор возраста -->
        <div class="age calc-block">
          <div class="left-side"><label for="select-age">Возраст:</label></div>
          <div class="right-side">
            <select name="select-age" id="select-age">
              <option data-f="19.5" data-m="21.4" value="">19-24 года</option>
              <option data-f="23.2" data-m="21.6" value="">25-34 года</option>
              <option data-f="23.4" data-m="22.9" value="">35-44 года</option>
              <option data-f="25.2" data-m="25.8" value="">45-54 года</option>
              <option data-f="27.3" data-m="26.6" value="">после 55 лет</option>
            </select>
          </div>
        </div>
        
        <!-- Ввод веса -->
        <div class="weight calc-block">
          <div class="left-side">
            <label for="weight-in">Вес:</label>
          </div>
          <div class="right-side">
            <input type="number" name="weight" id="weight-in" placeholder="в килограммах" required />
          </div>
        </div>

        <!-- Ввод роста -->
        <div class="height calc-block">
          <div class="left-side">
            <label for="height-in">Рост:</label>
          </div>
          <div class="right-side">
            <input type="number" name="height" id="height-in" placeholder="в сантиметрах" required=/>
          </div>
        </div>
        
        <div class="calc-btn calc-block">
          <input type="submit" value="Рассчитать индекс массы тела" />
        </div>
        
      </form>
      
      <!-- Вывод результата -->
      <div class="calc-result"></div>
     
    </div>
   
  </body>
</html>

Javascript (файл script.js)

$(document).ready(function(){
 
  // Берем весь блок в переменную для последующей более быстрой работой с ним
  var calcBlock = $('.calculator_imt');
  
  // Следим за формой и начинаем обрабатывать результат только по событию submit (нажатие кнопки или нажатие Enter в поле)
  $('form', calcBlock).submit(function(event){
    
    // Отменяем действия формы по умолчанию (не перезагружаем страницу при подсчёте)
    event.preventDefault();

    ////// ПОЛУЧАЕМ ДАННЫЕ, с которыми потом будем работать
    
    // Значение ПОЛа
    var calcGender = $('[name = sex]:checked', calcBlock).val();
    // Значение ВОЗРАСТа
    var calcAge = $('[name = select-age]', calcBlock);
    // Значение ИМТ для ЖЕНЩИНЫ выбранного возраста
    var imtF = $(':selected', calcAge).data('f');
    // Значение ИМТ для МУЖЧИНЫ выбранного возраста
    var imtM = $(':selected', calcAge).data('m');
    // Значение ВЕСа
    var calcWeight = $('[name = weight]', calcBlock).val();
    // Значение РОСТа
    var calcHeight = $('[name = height]', calcBlock).val();
    
    ////// РАССЧИТЫВАЕМ имт ( m/h*h, где m - масса тела человека в килограммах, а h - рост человека в метрах )
    // Считываем оптимальный имп относительно возраста и пола
    var itmOptimal = ( calcGender == 'F' ) ? imtF : imtM;
    // Сама формула расчёта
    var myIMT = +( calcWeight / ( ( calcHeight * calcHeight / 10000 ) ) ).toFixed(1);
    // Начальная фраза при выводе результата на экран (далее в зависимости от результата сравнения она будет дополнена)
    var message = 'При Вашем росте ' + calcHeight + ' см и весом ' + calcWeight + ' кг ИМД равен ' + myIMT + ', а это значит, что у Вас ';
    
    ////// СРАВНИВАЕМ полученный имт человека с введенными им параметрами и оптимальными для него
    if ( myIMT < itmOptimal ) message += 'наблюдается дефицит массы. Рекомендуется ИМД равный ' + itmOptimal + '. Обычно дефицит массы связан с хроническими заболеваниями, нарушениями питания, нервными недомоганиями, а так же анорексией.';
    else if ( myIMT == itmOptimal ) message += 'нормальная масса. Рекомендуется ИМД равный ' + itmOptimal + '. Нормальная масса тела характеризует здоровый вес, необходимый для полноценной жизнедеятельности организма.';
    else if ( myIMT > itmOptimal ) message += 'избыток масса тела. Рекомендуется ИМД равный ' + itmOptimal + '. Избыточная масса тела увеличивает риск возникновения сердечнососудистых заболеваний и увеличивает нагрузку на все органы. При таком показателе ИМТ желательно придерживаться диеты и получать аэробные нагрузки, чтобы довести ИМТ до нормальных значений.';
    else message = 'Мы не смогли рассчитать для Вас ИМТ.';
    
    ////// ВЫВОДИМ на экран результат вычислений и общий вывод
    $('.calc-result').text( message );
    
  });
  
});

CSS (файл style.css)

.calculator_imt h2 {
 text-align: center;
}

.calculator_imt form {
 width: 500px;
 margin: 0 auto;
}

.left-side, .right-side {
 display: inline-block;
 vertical-align: top;
}

.left-side {
 width: 185px;
 padding: 5px 10px 5px 0;
 text-align: right;
}

.right-side {
 width: 300px;
}

.calculator_imt input {
 padding: 2px 5px;
}

.calc-btn.calc-block {
  text-align: center;
}

Прошу заметить, что я использую библиотеку jQuery, так как она следит за относительной кроссбраузерностью. Вторая причина - я плоховато знаю ванильный js.

Спасибо большое, все работает. Только есть маленькая проблема, Joomla не находит jQuery.

Link to post
Share on other sites
  • Administrators

Спасибо большое, все работает. Только есть маленькая проблема, Joomla не находит jQuery.

В joomla встроено Jquery, какая ошибка в консоли?

Link to post
Share on other sites

В joomla встроено Jquery, какая ошибка в консоли?

Просто я хотел весь код объединить в один файл и залить его на сайт как материал через плагин.  Поэтому не знаете как можно сделать?

Link to post
Share on other sites
  • VIP

В joomla встроено Jquery, какая ошибка в консоли?

 

Может потому что используется $? Не знаю, как в Джумла, но в WP по умолчанию у скриптов не определяется с целью совместимости с другими библиоткеми, потому для WP я начинаю так:

jQuery(document).ready(function($){

В Джумле так или обычно?

Link to post
Share on other sites
  • Administrators

Может потому что используется $? Не знаю, как в Джумла, но в WP по умолчанию у скриптов не определяется с целью совместимости с другими библиоткеми, потому для WP я начинаю так:

jQuery(document).ready(function($){

В Джумле так или обычно?

В Joomla надо использовать $. С другой стороны, ТС пишет что у него всё работает, так что о чем речь?)

Link to post
Share on other sites
  • VIP

Просто я хотел весь код объединить в один файл и залить его на сайт как материал через плагин.  Поэтому не знаете как можно сделать?

Нужно код выше немного подправить , с учетом того что у вас уже есть индекс и он генерит страницы(шаблон), а код отдельная стр. по сути <html></html>.

Так что лишние теги подчистить скрипт подключить ну и цсс вынести и подключить .

Все вместе зачем лепить в одну кашу?

Link to post
Share on other sites

Нужно код выше немного подправить , с учетом того что у вас уже есть индекс и он генерит страницы(шаблон), а код отдельная стр. по сути <html></html>.

Так что лишние теги подчистить скрипт подключить ну и цсс вынести и подключить .

Все вместе зачем лепить в одну кашу?

Он у меня работает тока не выдает результат. Почему я все делаю в одну кашу потому что так легче залить его на материалы.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...