-1

Please help me, i've the javascript allmost done. Only the last part is very difficult. I've used the calculator plugin for contact form7, to calculate the BMI, this works perfectly. To hide the BMIhigh text also works, and the click

Length (cm):
<label id="centi">[number* cm min:130 max: 220]</label>

Hight (kilo):
<label id="kilo">[number* kilo min:40 max:140]</label>

<label id="calcbutton">[calculate_button "calculate"]</label>

<label id="calc">[calculation calculate precision:1 "kilo / ((cm / 100) * (cm / 100))"]</label> 
<label id="BMIhigh"> 
Your BMI is too high
</label>
[submit "Send"]

At the bottom i've got the following code:

// Hide the BMIhigh text field by default
document.getElementById("BMIhigh").style.display = 'none';
// On every 'click' on the calculator call the displayTextField function
document.getElementById("calcbutton").addEventListener("click", displayTextField);
  function displayTextField() {
    // Get the inserted values for centi and kilo and calculate the BMI again 
    // for the function without the help of the calculator build in into the extra plugin.
   var centimeter = +document.getElementById("centi").value;
   var kilogram = +document.getElementById("kilo").value;
   var BMIvar = kilogram / ( ( centimeter / 100 ) * ( centimeter / 100 ) );
    // If BMIvar higher than 30 it is too high, the text should show. 
    // THIS LAST PART DOES NOT WORK
    if(BMIvar > 30) {
     document.getElementById("BMIhigh").style.display = 'block';
    } else {
      document.getElementById("BMIhigh").style.display = 'none';
    }
  }
</script> ```
Aurovrata
  • 2,000
  • 27
  • 45
Brian Driessen
  • 1
  • 1
  • 3
  • your question is vague, it's unclear what you are trying to achieve. Please read the question [guidelines](https://stackoverflow.com/help/how-to-ask) to understand how to maximise your chances of getting help. – Aurovrata Jan 06 '20 at 12:04
  • I would like to have a BMI calculator and when the BMI is higher than 30 the text element should appear. Only the last part of the code doesn't work. I don't understand why. Thanks for you help! – Brian Driessen Jan 07 '20 at 14:36
  • did you try to step through your code using the [debugger in the javascript console](https://developers.google.com/web/tools/chrome-devtools/javascript)? – Aurovrata Jan 08 '20 at 13:04

1 Answers1

1

Your variable BMIvar never get evaluated because,

var centimeter = +document.getElementById("centi").value;
var kilogram = +document.getElementById("kilo").value;

these variables are not being populated properly. CF7 converts field tags into <span> encapsulated <input/> fields,

<label id="centi">
  <span class="wpcf7-form-control-wrap cm">
    <input type="number" name="cm" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-required">
  </span>
</label>

and as such getElementById returns the <label/> element and not the <input/> one. element.value only works for <input/> fields. Try instead to use getElementsByName and replace the above 2 lines with,

var centimeter = 1.0*document.getElementsByName("cm")[0].value;
var kilogram = 1.0*document.getElementsByName("kilo")[0].value;

Here is a jsFiddle with a working example.

Aurovrata
  • 2,000
  • 27
  • 45