javascript - 创建临时转换器的下一步是什么?
问题描述
这是我第一次尝试使用JS创建一个简单的程序,我是一个初学者,所以请多多包涵。我在这里是因为我觉得我拥有所有这些代码,但我不明白如何将它们链接在一起。我在表单中有两个单独工作的函数,但我显然需要将它们链接到 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>
解决方案
您的代码有几个问题。
首先,您在应用程序加载时访问用户输入的值,因此当用户在输入框中进行任何更改并提交时,用户输入的值不会到达 javascript。
在提交事件的回调函数中应用的逻辑检查不正确。您需要访问
select
具有 id 的元素的值temperature
。在您的情况下,用于计算转换的函数调用也是错误的。函数调用遵循
<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);
}
})
这是我的解决方案的链接:https ://stackblitz.com/edit/js-kruqd1
推荐阅读
- ruby-on-rails - Rails 添加验证以根据属性检查模型的实例数
- java - Android工作室,在java中每次点击都会改变按钮文本
- ios - 如何使用 SpriteKit 在 Xcode 13 中以编程方式设置根视图控制器?
- git - 创建新分支时将日期和时间附加到分支名称
- flutter - 可以“保持中心点”的列。我能做些什么?
- r - R 中的 QuantLib:键设置
- javascript - 全局导入js文件到vuejs 3
- core-data - 访问相关实体
- html - html 文件中的 XML 相关下拉列表
- asp.net-mvc - 下拉列表未显示正确的 SelectedItem