创建温度转换器的下一步是什么？

Question

我是第一次尝试使用JS编写一个简单的程序，我是初学者，所以请多多包涵。我在这里是因为我觉得我拥有所有这些代码片段，但我不明白如何 link 将它们组合在一起。我在表单中有两个独立工作的函数，但我显然需要 link 它们到 if 语句中的结果语句，但我不确定该怎么做。另外，我确信这是写得不好的代码，但现在我只是专注于有一个工作程序。这是我到目前为止的 JS 代码（HTML 之后）：

    // grab elements & store in variable
const form = document.querySelector("form");
const submit = document.getElementById("submit");
const selectCelsius = document.getElementById("celsius")
const selectFahrenheit = document.getElementById("fahrenheit")
const result = document.getElementById("result");
const userInput = document.getElementById("userInput").value


form.addEventListener("submit", (e) => {
    e.preventDefault();

    
    const fahrenheit = (c) => {
   
        let f = (c * 9/5) + 32
        
        return f
    
    }

    const celsius = (f) => {

        let c = ((f - 32) * 5) - 9
    
        return c
    }

if (selectCelsius === "Celsius" && submit.innerHTML === "CONVERT") {
   return result.innerHTML = "Your result is " + userInput(fahrenheit)
} 
if (selectFahrenheit === "Fahrenheit" && submit.innerHTML === "CONVERT") {
    return result.innerHTML = "Your result is " + userInput(celsius)
}

})

HTML:

<body>

    
        <div class="main-wrapper">
            <div class="sub-wrapper">
            <div class="weather">
                <img src="./img/weather.png" alt="weather">
                
                    <h1>temperature converter</h1>
                
            </div>
            <form action="#">
                <input type="number" id="userInput" name="temperature" placeholder="temperature">
                    <select name="temperature" id="temperature">
                        <option value="celsius" id="celsius">Celsius</option>
                        <option value="fahrenheit" id="fahrenheit">Fahrenheit</option>
                    </select>
               
                    <input type="submit" id="submit" value="CONVERT"></input>
                
            </form>
            <p id="result"></p>
            </div>
        </div>
    
<script src="./app.js"></script>
</body>

Answer 1

您的代码有几个问题。

首先，您正在访问应用程序加载时用户输入的值，因此当用户在输入框中进行任何更改并提交时，输入的值用户未达到 javascript.
在提交事件的回调函数中应用的逻辑检查不正确。您需要访问具有 id temperature.
的 select 元素的值
在您的情况下，用于计算转换的函数调用也是错误的。函数调用遵循 <function-name>(<argument>) 模式。因此它应该是 fahrenheit(userInput) 而不是 userInput(fahrenheit)。同样 celsius(userInput)

js 代码中的以下更改应该会给您预期的结果。

// grab elements & store in variable
const form = document.querySelector("form");
const submit = document.getElementById("submit");

const result = document.getElementById("result");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const userInput = document.getElementById("userInput").value;
  const selectTemperature = document.getElementById("temperature").value;

  const fahrenheit = c => {
    let f = (c * 9) / 5 + 32;
    return f;
  };

  const celsius = f => {
    let c = (f - 32) * 5 - 9;
    return c;
  };

  if (selectTemperature === "celsius") {
    result.innerHTML = "Your result is " + fahrenheit(userInput);
  }

  if (selectTemperature === "fahrenheit") {
    result.innerHTML = "Your result is " + celsius(userInput);
  }
})

这是我的解决方案 link：https://stackblitz.com/edit/js-kruqd1

创建温度转换器的下一步是什么？

What's the next step in creating a temp converter?

javascript

forms

function

converters

temp