Javascript 制作体重和身高转换器时，如何使用按钮在身高和体重转换之间切换？

我做了一个简单的javascript重量转换器，我想通过添加高度转换进一步，我希望用户能够单击重量按钮并转换重量，或者/然后单击高度按钮并转换高度。重量部分工作正常，但切换到高度给我带来了问题。我已经试着解决这个问题一个星期了。这是我代码的链接 谢谢你的帮助

下面是js代码

    //hides weight cards
    document.getElementById('ozCard').style.display = 'none'; 
    document.getElementById('lbsCard').style.display = 'none'; 
    document.getElementById('kgCard').style.display = 'none'; 
    // hides height cards
    document.getElementById('cmCard').style.display = 'none'; 
    document.getElementById('mtCard').style.display = 'none'; 
    document.getElementById('ftCard').style.display = 'none'; 
    //hides the Radios
    document.getElementById('weightRadios').style.display = 'none';
    document.getElementById('heightRadios').style.display = 'none';

    //adds event listener for weight radio buttons
    var inputCheck = document.querySelector('.inputCheck');
    for(var i=0; i<inputCheck; i++){
    inputCheck[i].addEventListener('change', convertWeight, false);
    }
    //adds event listener for height radios
    var inputChecked = document.querySelector('.inputChecked');
    for(var j=0; j<inputCheck; j++){
    inputChecked[j].addEventListener('input', convertHeight, false);
    }

    //function to make weight radios visible
    function weightFunction(){
    var weightRadios = document.getElementById('weightRadios');
    if (weightRadios.style.display === 'none' )
    {   weightRadios.style.display = 'inline';
        heightRadios.style.display = 'none';
       
    } else {
        weightRadios.style.display = 'none';
      }
    }
    //function to make height radios visible
    function heightFunction(){
      var heightRadios = document.getElementById('heightRadios' );
      if (heightRadios.style.display === 'none') {
        heightRadios.style.display = 'inline';
        weightRadios.style.display = 'none';
        
      } else {
        heightRadios.style.display = 'none';
    }
    }

    //adds event listener for the mass input
    document.getElementById('massInput').addEventListener
    ('input', convertWeight, false);
   
    //weight function
    function convertWeight(){
  
    //Declaring mass var for the input
    var mass = document.getElementById('massInput').value;

    //checking what radio is checked
    //converting to kg in all cases
    if(document.getElementById('kgChecked').checked ==true){
        var kg = mass;
      }else if(document.getElementById('lbsChecked').checked ==true){
            var kg = mass * 0.45359237;
      }else if(document.getElementById('ozChecked').checked ==true){
                var kg = mass * 0.0283495231;
    }
    //declaring each card
    var kgCard = document.getElementById("kgCard");
    var lbsCard = document.getElementById("lbsCard");
    var ozCard = document.getElementById("ozCard");
    var cmCard = document.getElementById("cmCard");
    var mtCard = document.getElementById("mtCard");
    var ftCard = document.getElementById("ftCard");
   
    //Making unwanted cards disapear 
    if(document.getElementById('kgChecked').checked ==true)
    {
        kgCard.style.display = ('none')
        cmCard.style.display = ('none')
        mtCard.style.display = ('none')
        ftCard.style.display = ('none')
        lbsCard.style.display = ('inline')
        ozCard.style.display = ('inline')
        
    }else{
        kgCard.style.display = ('inline')
        }

    if(document.getElementById('lbsChecked').checked ==true){
        lbsCard.style.display = ('none')
        cmCard.style.display = ('none')
        mtCard.style.display = ('none')
        ftCard.style.display = ('none')
        kgCard.style.display = ('inline')
        ozCard.style.display = ('inline')
    }else{
        lbsCard.style.display = ('inline')
    }

    if(document.getElementById('ozChecked').checked ==true){
        ozCard.style.display = ('none')
        cmCard.style.display = ('none')
        mtCard.style.display = ('none')
        ftCard.style.display = ('none')
        kgCard.style.display = ('inline')
        lbsCard.style.display = ('inline')
    }else{
        ozCard.style.display = ('inline')
    }
     //converting to other units from kg
    // rounding to 3 decimals using math.round
    document.getElementById('kgOutput').innerHTML = 
    numberWithSpaces(Math.round(kg*1000)/1000);

    document.getElementById('lbsOutput').innerHTML = 
    numberWithSpaces(Math.round(kg* 2.20462262 * 1000)/1000);

    document.getElementById('ozOutput').innerHTML = 
    numberWithSpaces(Math.round(kg * 35.2739619 * 1000)/1000);
    }
    document.getElementById('massInput').addEventListener
    ('input', convertHeight, false);

    //function for height convertion
    function convertHeight(){
  
    var massInput = document.getElementById('massInput').value;
    
    //checking what radio is checked and converting to cm in all cases
    if(document.getElementById('cmChecked').checked ==true){
        var cm = massInput;
      }else if(document.getElementById('mtChecked').checked ==true){
            var cm = massInput * 0.45359237;
      }else if(document.getElementById('ftChecked').checked ==true){
                var cm = massInput * 0.0283495231;
    }
  
    // hiding un wanted cards
    if(document.getElementById('cmChecked').checked ==true)
    {
        kgCard.style.display = ('none')
        cmCard.style.display = ('none')
        lbsCard.style.display = ('none')
        ozCard.style.display = ('none')
        ftCard.style.display = ('inline')
        mtCard.style.display = ('inline')
        
    }else{
        cmCard.style.display = ('inline')
        
    }
    
    if(document.getElementById('mtChecked').checked ==true){
        lbsCard.style.display = ('none')
        kgCard.style.display = ('none')
        mtCard.style.display = ('none')
        ozCard.style.display = ('none')
        cmCard.style.display = ('inline')
        ftCard.style.display = ('inline')
        
    }else{
        mtCard.style.display = ('inline')
    }
    
    if(document.getElementById('ftChecked').checked ==true){
        ftCard.style.display = ('none')
        ozCard.style.display = ('none')
        lbsCard.style.display = ('none')
        kgCard.style.display = ('none')
        mtCard.style.display = ('inline')
        cmCard.style.display = ('inline')
    }else{
        ftCard.style.display = ('inline')
    }
  
    // height output
    document.getElementById('cmOutput').innerHTML = 
    numberWithSpaces(Math.round(cm*1000)/1000);

    document.getElementById('mtOutput').innerHTML = 
    numberWithSpaces(Math.round(cm* 2.20462262 * 1000)/1000);

    document.getElementById('ftOutput').innerHTML = 
    numberWithSpaces(Math.round(cm * 35.2739619 * 1000)/1000);

   }
    //Seperate thousands by spaces
    function numberWithSpaces(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
    }
  

//隐藏重量卡
document.getElementById（'ozCard'）.style.display='none'；
document.getElementById（'lbsCard'）.style.display='none'；
document.getElementById（'kgCard'）.style.display='none'；
//隐藏高度卡
document.getElementById（'cmCard'）.style.display='none'；
document.getElementById（'mtCard'）.style.display='none'；
document.getElementById（'ftCard'）.style.display='none'；
//隐藏收音机
document.getElementById（'weightRadios'）.style.display='none'；
document.getElementById（'heightRadios'）.style.display='none'；
//为权重单选按钮添加事件侦听器
var inputCheck=document.querySelector（'.inputCheck'）；
对于（var i=0；i您在有关选中元素的控制台错误
mtChecked
-您的
mtChecked
中没有元素-其
metersChecked
-您的代码现在正在下面运行

此外，您的JS代码需要大量的
优化
，并且可以
减少
，大约少于
100行

现场工作演示


//隐藏重量卡
document.getElementById（'ozCard'）.style.display='none'；
document.getElementById（'lbsCard'）.style.display='none'；
document.getElementById（'kgCard'）.style.display='none'；
//隐藏高度卡
document.getElementById（'cmCard'）.style.display='none'；
document.getElementById（'mtCard'）.style.display='none'；
document.getElementById（'ftCard'）.style.display='none'；
//隐藏收音机
document.getElementById（'weightRadios'）.style.display='none'；
document.getElementById（'heightRadios'）.style.display='none'；
//为权重单选按钮添加事件侦听器
var inputCheck=document.querySelector（'.inputCheck'）；
对于（变量i=0；i