我的转换数学正确(在这里查找了),但是从以cm为单位显示高度的元素获取值,然后将其解析为ft / inch并在(单击时)将其显示在右侧跨度上不起作用,我得到一个参考错误(转换器未定义)。

我无法弄清楚为什么它是未定义的,是因为吊起还是parseInt函数不能具有原样的参数?

这是功能

var displayInches = document.getElementById("heightInches");


displayInches.addEventListener("click", function() {
toFeet(converter);
});

function toFeet(converter) {
var heightOutputCM = document.getElementById("yourHeight");
 var converter = parseInt(heightOutputCM.value);
 var realFeet = converter * 0.3937 / 12;
 var feet = Math.floor(realFeet);
 var inches = Math.round((realFeet - feet) * 12);
 return feet + "and" + inches;
 }


链接在这里:

https://codepen.io/damianocel/pen/ZyRogX

最佳答案

的HTML

<h1>Alcohol blood level calculator</h1>

<fieldset>
      <legend>Your Indicators</legend><br>
      <label for="height" class="margin">Height:</label>
      <span class="leftlabel" id=""><span id="yourHeight"></span>Cm</span>
      <input type="range" id="UserInputHeight" name="height" min="0" max="200" step="1" style="width: 200px">
      <span id="heightInchesSpan"  class="rightlabel"><span id="heightInches"></span>Ft</span>
      <br>
      <label for="" class="margin">Gender:</label>
      <span class="leftlabel">Male</span>
      <input type="range" id="salary" name="salary" min="0" max="1" style="width: 200px">
      <span class="rightlabel">Female</span>
 </fieldset>


JS

// get and display height

var displayHeightInput = document.getElementById("UserInputHeight");

displayHeightInput.addEventListener("input", function() {
  sliderChange(this.value);
});

function sliderChange(val) {
  var heightOutput = document.getElementById("yourHeight");
  heightOutput.innerHTML = val;
  toFeet();
  return val;
}


function toFeet() {
  var heightOutputCM = document.getElementById("yourHeight");
  var converter = parseInt(heightOutputCM.innerHTML);
  var realFeet = converter * 0.3937 / 12;
  var feet = Math.floor(realFeet);
  var inches = Math.round((realFeet - feet) * 12);
  document.getElementById("heightInches").innerHTML=feet + "and" + inches;
  return feet + " and " + inches;
}

10-04 10:57
查看更多