ft値にCmを取得して他の要素に表示すると参照エラーが発生する

Question

変換の計算が正しく行われていますが（高さがcmで表示されている要素から値を取得してからft /右側のスパンが機能しない（クリックすると）それを表示すると、参照エラー（コンバータが定義されていません）が表示されます。

なぜそれが定義されていないのか、それが吊り上げによるものなのか、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

Answer 1

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; 
}