使用 HTML 和 JavaScript 创建温度转换器

问题描述 投票：0回答：1

简而言之，我在网站上有两个输入框，分别用于“摄氏度”和“华氏度”。基本功能是能够将“F 到 C”和“C 到 F”转换。这听起来很简单，在过去的几个小时里，我什至都无法完成这个简单的壮举。

棘手的部分是我需要验证用户无法同时在两个字段中输入值。这要求一旦用户在另一个字段中输入单个字符，第一个字段（在本例中，其中有一个值）就会被清除。

之所以会这样，是因为当用户单击“转换”按钮时，一个字段中的值将被清除，并被传输/转换到另一字段。例如：用户在 Fahr 中输入 (98.6)。字段并按“转换”按钮。这导致了法尔。要清除的字段，摄氏度字段将填充转换后的值。

此外，如果用户输入任何不是数字的值，我必须在“ErrDiv”

对象中显示“X不是数字”，其中“X”是用户输入的字符串。显然，我应该利用“parseFloat()”函数返回“NaN”。

我还必须更改该网站上的图像以反映温度值，但我什至还没有接近处理这个问题，所以让我们暂时忽略这个要求。

通常情况下，我非常擅长学习新语言（Java、Python、C++、HTML、CSS 等），但由于某种原因，JavaScript 在我的这个项目中回避了我，我感到非常沮丧。我明白我应该做什么，并且非常清楚如何去做......但我已经取得了 0％ 的进展，甚至无法将该死的温度值转换并显示在屏幕上。

注意：不幸的是，我无法对“index.html”文件进行任何更改。这意味着我无法使用“onclick”功能（这将使我的生活变得更加轻松！）。另外，很抱歉“index.js”文件有点乱。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="index.js"></script>
    </head>
    <body onload="bodyLoaded()">
        Celsius:
        <br>
        <input id="CInput" type="text" value="" />
        <br><br>
        Fahrenheit:
        <br>
        <input id="FInput" type="text" value="" />
        <br><br>
        <input id="ConvertButton" type="button" value="Convert" />
        <div id="ErrDiv" style="color: red"></div>
        <br><br>
        <img id="WeatherImage" src="warm.gif" />
    </body>
</html>


var convertButton = document.getElementById("ConvertButton");
var error = document.getElementById("ErrDiv");
var degC = document.getElementById("CInput");
var degF = document.getElementById("FInput");
var C = degC.value;
var F = degF.value;


function ConvertCtoF(degreesCelsius) {
    // Your code here
    var x = parseFloat(C);
    if (isNaN(x)) {
        error.innerHTML = "X is not a number"; // Replace "X" with the value!
        degreesCelsius.preventDefault();
    }
    
    F = x * (9/5) + 32;
}

function ConvertFtoC(degreesFahrenheit) {
    // Your code here
    var x = parseFloat(F);
    if (isNaN(x)) {
        error.innerHTML = "X is not a number";
        degreesFahrenheit.preventDefault();
    }
    
    C = (x - 32) * (5/9);
}

function clearFieldF() {
    F = "";
}

function clearFieldC() {
    C = "";
}

function bodyLoaded() {
    // Your code here
    
    
    convertButton.addEventListener("ConvertButton", () => {
        if (F.length != 0 && C.length != 0) {
            convertButton.preventDefault();
        }
        
        if (C.length != 0 && F.length == 0) {
            ConvertCtoF
        }
    
        if (F.length != 0 && C.length == 0) {
            ConvertFtoC
        }
    });
    
    
    
    /*
    var input = document.querySelector("text");
    input.addEventListener("inputF", clearField);
    */
    
    /*
    var inputC = document.querySelector("Cinput");
    inputC.addEventListener("inputC", clearField);
    */
    
    
    degF.addEventListener("inputF", clearFieldC);
    degC.addEventListener("inputC", clearFieldF);
    
    
    /*
    if (C.length != 0 && F.length == 0) {
        convertButton.addEventListener("click", ConvertCtoF);
    }
    
    if (F.length != 0 && C.length == 0) {
        convertButton.addEventListener("click", ConvertFtoC);
    }
    
    else {
        convertButton.preventDefault();
    }
    */
}

我搜索了大量的论坛（包括 stackoverflow.com 上的论坛）以及教科书中的整个 JavaScript 章节。就像我在主要描述中所说的那样，我知道我需要做什么，并且非常清楚如何去做，但是我的代码中的某些内容阻止了它执行任何操作。在过去几个小时的尝试中，我在视觉上完全没有取得任何进展。该网站仍然表现得好像我从未编写过任何代码一样。

我重写了整个 JavaScript 代码，因为我尝试使用您提供的代码，但它抛出了太多错误，并且有点难以阅读。如果您想验证用户只能有 1 个包含字符的输入框，您可以为这两个输入添加事件侦听器。您可以检查输入，如果他们输入了某些内容，它将清除相反的输入元素。这是我的代码。如果这对您有帮助，请告诉我：

window.onload = bodyLoaded;

function bodyLoaded() {
  console.log("loaded");

  const convertButton = document.getElementById("ConvertButton");
  const degC = document.getElementById("CInput");
  const degF = document.getElementById("FInput");
  const error = document.getElementById("ErrDiv");

  // Add event listeners to clear the other input field when one is edited
  degC.addEventListener("input", function () {
    if (degC.value !== "") {
      // Clear Fahrenheit input
      degF.value = "";
      error.innerHTML = ""; // Clear error message
    }
  });

  degF.addEventListener("input", function () {
    if (degF.value !== "") {
      // Clear Celsius input
      degC.value = "";
      error.innerHTML = ""; // Clear error message
    }
  });

  convertButton.addEventListener("click", checkInputs);
  //   convertButton.addEventListener("click", convertValues);

  function checkInputs() {
    let isFloat = parseFloat(degC.value || degF.value);
    console.log(isFloat);
    if (isNaN(isFloat)) {
      error.innerHTML = "X is not a number";
      return false;
    } else if (degC.value) {
      let result = convertCelsiusToFahrenheit(degC.value);
      degF.value = result;
    } else if (degF.value) {
      let result = convertFahrenheitToCelsius(degF.value);
      degC.value = result;
    }
  }
}

function convertValues() {
  if (degC) {
    let result = convertCelsiusToFahrenheit(degC.value);
    degF.value = result;
  }
}

function convertCelsiusToFahrenheit(num) {
  return num * (9 / 5) + 32;
}

function convertFahrenheitToCelsius(num) {
  return (num - 32) * (5 / 9);
}
javascript html addeventlistener getelementbyid parsefloat
1个回答
0
投票

我重写了整个 JavaScript 代码，因为我尝试使用您提供的代码，但它抛出了太多错误，并且有点难以阅读。如果您想验证用户只能有 1 个包含字符的输入框，您可以为这两个输入添加事件侦听器。您可以检查输入，如果他们输入了某些内容，它将清除相反的输入元素。这是我的代码。如果这对您有帮助，请告诉我：

window.onload = bodyLoaded;

function bodyLoaded() {
  console.log("loaded");

  const convertButton = document.getElementById("ConvertButton");
  const degC = document.getElementById("CInput");
  const degF = document.getElementById("FInput");
  const error = document.getElementById("ErrDiv");

  // Add event listeners to clear the other input field when one is edited
  degC.addEventListener("input", function () {
    if (degC.value !== "") {
      // Clear Fahrenheit input
      degF.value = "";
      error.innerHTML = ""; // Clear error message
    }
  });

  degF.addEventListener("input", function () {
    if (degF.value !== "") {
      // Clear Celsius input
      degC.value = "";
      error.innerHTML = ""; // Clear error message
    }
  });

  convertButton.addEventListener("click", checkInputs);
  //   convertButton.addEventListener("click", convertValues);

  function checkInputs() {
    let isFloat = parseFloat(degC.value || degF.value);
    console.log(isFloat);
    if (isNaN(isFloat)) {
      error.innerHTML = "X is not a number";
      return false;
    } else if (degC.value) {
      let result = convertCelsiusToFahrenheit(degC.value);
      degF.value = result;
    } else if (degF.value) {
      let result = convertFahrenheitToCelsius(degF.value);
      degC.value = result;
    }
  }
}

function convertValues() {
  if (degC) {
    let result = convertCelsiusToFahrenheit(degC.value);
    degF.value = result;
  }
}

function convertCelsiusToFahrenheit(num) {
  return num * (9 / 5) + 32;
}

function convertFahrenheitToCelsius(num) {
  return (num - 32) * (5 / 9);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.