如何根据 switch case 切换表单功能？答案

【问题标题】：How do I switch form function based on switch case?如何根据 switch case 切换表单功能？
【发布时间】：2020-06-25 04:27:54
【问题描述】：

我已经能够使用距离转换器的开关来更改标题和方向，并且我已经写出了将 mi 转换为 km 和 km 转换为 mi 的函数，但我不确定如何获得合适的按下 k 或 m 后，功能链接到转换距离按钮。任何帮助都会很棒！ :)

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Miles to Kilometers Converter</title>

<!--/ /-------- Normalize CSS --------/ /-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">

<!--/ /-------- Google Fonts --------/ /-->
<link href="https://fonts.googleapis.com/css?family=Oswald|PT+Sans&display=swap" rel="stylesheet">

<!--/ /-------- My Styles --------/ /-->
<link href="styles.css" rel="stylesheet">

</head>

<body>

    <h1>Miles to Kilometers Converter</h1>

    <div class="container top">
        <p>Type in a number of miles and click the button to convert the distance to kilometers.</p>

        <form id="convert">

            <input type="text" name="distance" id="distance" placeholder="distance">
            <input type="button" name="convertdist" value="Convert Distance" onclick="convert()">

        </form>
    </div>
    <div class="container bottom" id="answer">
        <h2 class="invisible"></h2>
    </div>

    <p id="directions">Press the "K" key to switch to kilometer converstion, press the "M" key to switch to mile conversion</p>


<script>

function convert(){

            var miles = parseInt(document.getElementById("distance").value);
            var kilometers = (miles * 1.609344);
            var answer = document.createElement("H2");
            answer.innerHTML = `${miles} miles converts to ${kilometers.toFixed(3)} kilometers`;
            document.getElementById("answer").appendChild(answer);

          if (isNaN(kilometers)){
              answer.innerHTML = `Enter a number you clown!`;

          }
}

      function convert(){

            var miles = (kilometers * 0.621371);
            var kilometers = parseInt(document.getElementById("distance").value);
            var answer = document.createElement("H2");
            answer.innerHTML = `${kilometers} kilometers converts to ${miles.toFixed(3)} miles`;
            document.getElementById("answer").appendChild(answer);

          if (isNaN(miles)){
              answer.innerHTML = `Enter a number you clown!`;


var header = document.querySelector("H1");
var directions = document.querySelector("P");
document.addEventListener('keydown', function(event){

    var keyPressed = event.which;


    switch(keyPressed){
        case 77:header.innerHTML = "MILES TO KILOMETERS CONVERTER";
                directions.innerHTML = "Type in a number of miles and click the button to convert the distance to kilometers.";
                break;
        case 75:header.innerHTML = "KILOMETERS TO MILES CONVERTER";
                directions.innerHTML = "Type in a number of kilometers and click the button to convert the distance to miles.";
                break;
        //default: alert("Please press K or M for conversion");
        }
    });


</script>

</body>
</html>

【问题讨论】：

我已经尝试将函数放在适当的情况下，但无济于事。我对这一切都很陌生，请善待。我还在学习 javascript，只有四分之一的 HTML 和 CSS 可以依靠。 :)
这是你的代码中非常严肃的一行。没有人这样做。>>输入一个你小丑的数字！

标签： javascript html function switch-statement

【解决方案1】：

您可以采取的一种方法是在您更新标题的同一位置更新某个标志变量，然后执行适当的计算，类似于：

// First conversion function
function convertMilesToKilometers(){
            var miles = parseInt(document.getElementById("distance").value);
            var kilometers = (miles * 1.609344);
            var answer = document.createElement("H2");
            answer.innerHTML = `${miles} miles converts to ${kilometers.toFixed(3)} kilometers`;
            document.getElementById("answer").appendChild(answer);

          if (isNaN(kilometers)){
              answer.innerHTML = `Enter a number you clown!`;
          }
}
// Second conversion function
function convertKilometersToMiles(){
    var miles = (kilometers * 0.621371);
    var kilometers = parseInt(document.getElementById("distance").value);
    var answer = document.createElement("H2");
    answer.innerHTML = `${kilometers} kilometers converts to ${miles.toFixed(3)} miles`;
    document.getElementById("answer").appendChild(answer);

    if (isNaN(miles)){
        answer.innerHTML = `Enter a number you clown!`;
    }
}

// Flag variable
var isMiToKm = false;
// Button event handler
function convert() {
    if(isMiToKm) convertMilesToKilometers();
    else convertKilometersToMiles();
}

var header = document.querySelector("H1");
var directions = document.querySelector("P");
document.addEventListener('keydown', function(event){
    var keyPressed = event.which;

    switch(keyPressed){
        case 77:header.innerHTML = "MILES TO KILOMETERS CONVERTER";
                directions.innerHTML = "Type in a number of miles and click the button to convert the distance to kilometers.";
                isMiToKm = true; // Set Mi->Km mode
                break;
        case 75:header.innerHTML = "KILOMETERS TO MILES CONVERTER";
                directions.innerHTML = "Type in a number of kilometers and click the button to convert the distance to miles.";
                isMiToKm = false; // Set Km->Mi mode
                break;
        //default: alert("Please press K or M for conversion");
        }
    });

（代码可以进一步改进，但希望概念清晰）

【讨论】：

【解决方案2】：

试试下面的代码。希望对你有帮助。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Miles to Kilometers Converter</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Oswald|PT+Sans&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
    </head>
<body>
    <h1>Miles to Kilometers Converter</h1>
    <div class="container top">
        <p>Type in a number of miles and click the button to convert the distance to kilometers.</p>
        <form id="convert">
            <input type="text" name="distance" id="distance" placeholder="distance">
            <input type="button" name="convertdist" value="Convert Distance" id="convert_btn">
        </form>
    </div>
    <div class="container bottom" id="answer">
        <h2 class="invisible"></h2>
    </div>
    <p id="directions">Press the "K" key to switch to kilometer converstion, press the "M" key to switch to mile conversion</p>
<script>
    var km = true;
    function convertKM(){
        var miles = parseInt(document.getElementById("distance").value);
        var kilometers = (miles * 1.609344);
        var answer = document.createElement("H2");
        answer.innerHTML = `${miles} miles converts to ${kilometers.toFixed(3)} kilometers`;
        document.getElementById("answer").appendChild(answer);
        if (isNaN(kilometers)){
            answer.innerHTML = `Enter a number you clown!`;

        }
    }

    function convertM(){
        var miles = (kilometers * 0.621371);
        var kilometers = parseInt(document.getElementById("distance").value);
        var answer = document.createElement("H2");
        answer.innerHTML = `${kilometers} kilometers converts to ${miles.toFixed(3)} miles`;
        document.getElementById("answer").appendChild(answer);

        if (isNaN(miles)){
            answer.innerHTML = `Enter a number you clown!`;
        }
    }

    var header = document.querySelector("H1");
    var directions = document.querySelector("P");
    document.addEventListener('keydown', function(event){
    var keyPressed = event.which;
    switch(keyPressed){
        case 77:header.innerHTML = "MILES TO KILOMETERS CONVERTER";
                directions.innerHTML = "Type in a number of miles and click the button to convert the distance to kilometers.";
                km = true;
                console.log(km);
                break;
        case 75:header.innerHTML = "KILOMETERS TO MILES CONVERTER";
                directions.innerHTML = "Type in a number of kilometers and click the button to convert the distance to miles.";
                km = false;
                console.log(km);
                break;
        //default: alert("Please press K or M for conversion");
        }
    });

    var function_ = document.getElementById('convert_btn');
    function_.addEventListener('click',function(params) {
        console.log('imfired');
        if(km == true){        
            convertKM();   
        }
        else{
            convertM();   
        }
    });
</script>
</body>
</html>

【讨论】：

嗨，我已经更新了代码，当我通过按 K 切换到公里到英里时，表单提交但响应好像我没有输入数字一样。相反，它会在有人输入字母时给我消息。你知道为什么会这样吗？
没关系！我能够弄清楚！我在 convertM() 中切换了前两个变量并解决了它。非常感谢您的帮助！