如何将 html 文件中的脚本转换为单独的 JavaScript 文件

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

我需要将此文件中的 Java 脚本转换为单独的 .js 文件，我可以在原始 html 文件中使用该文件，并且我知道如何使其工作。

这是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple Calculator App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
</head>
<body>
  <div class="register-form mt-3 mb-3">
    <div class="container-fluid">
          <div class="row">
            <div class="col-md-6 d-none d-md-block bg-warning" "">
                <h1 class="text-center pt-3">Results</h1>
                <p id="max"></p>
                <p id="min"></p>
                <p id="mean"></p>
                <p id="median"></p>
                <p id="range"></p>
            </div>
            <div class="col-md-6 bg-dark">
                <form action="#" class="p-4 text-white">
                  <div class="form-group">
                      <label for="Number1"> Number 1</label>
                      <input type="text" class="form-control" id="num1" placeholder="Number 1">
                  </div>
                  <div class="form-group">
                      <label for="Number2"> Number 2</label>
                      <input type="text" class="form-control" id="num2" placeholder="Number 2">
                  </div>
                  <div class="form-group">
                      <label for="Number3"> Number 3</label>
                      <input type="text" class="form-control" id="num3" placeholder="Number 3">
                  </div>
                 
                  <button type="submit" class="btn btn-warning mb-3 mt-3 float-right" id="cal" onclick="myFunction()">Calculate</button>
                </form>
            </div>
          </div>
      </div>
  </div>
    
    <script> //start of JavaScript code
    function myFunction() {
  // Get the input values, check for numbers, if there are letters returns numbers before letter per each field
  var num1 = parseFloat(document.getElementById("num1").value);
  var num2 = parseFloat(document.getElementById("num2").value);
  var num3 = parseFloat(document.getElementById("num3").value);

  // Check if the inputs are valid numbers
  if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
    alert("Please enter valid numbers."); //alerts if not valid numbers
    return;
  }

  // Calculate max, min, mean, and range
  var max = Math.max(num1, num2, num3); // Calculate the maximum value among the three numbers using math methods
  var min = Math.min(num1, num2, num3); // Calculate the minimum value among the three numbers using math methods
  var mean = (num1 + num2 + num3) / 3; // Calculate the mean of the three numbers
  var range = max - min; // Calculate the range 

  // Calculate median
  var numbers = [num1, num2, num3];
  numbers.sort(function(a, b) {
    return a - b;
  });
  var median;
  if (numbers.length % 2 === 0) {
    var mid1 = numbers[numbers.length / 2 - 1];
    var mid2 = numbers[numbers.length / 2];
    median = (mid1 + mid2) / 2; // Calculate the median for even count of numbers
  } else {
    median = numbers[Math.floor(numbers.length / 2)]; // Calculate the median for odd count of numbers
  }

  // Display the results
  document.getElementById("max").textContent = "max = " + max; // Display the maximum
  document.getElementById("min").textContent = "min = " + min; // Display the minimum
  document.getElementById("mean").textContent = "mean = " + mean.toFixed(1); // Display the mean with one decimal place
  document.getElementById("median").textContent = "median = " + median; // Display the median
  document.getElementById("range").textContent = "range = " + range; // Display the range
}
    </script> 
</body>
</html>

我尝试将脚本移动到自己的文件中，但编译器一直说提到的变量“未声明”，即使我用初始化声明了它们。

javascript html css file hyperlink
1个回答
0
投票

我们可以像这样加载外部js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple Calculator App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    
</head>
<body>
  <div class="register-form mt-3 mb-3">
    <div class="container-fluid">
          <div class="row">
            <div class="col-md-6 d-none d-md-block bg-warning" "">
                <h1 class="text-center pt-3">Results</h1>
                <p id="max"></p>
                <p id="min"></p>
                <p id="mean"></p>
                <p id="median"></p>
                <p id="range"></p>
            </div>
            <div class="col-md-6 bg-dark">
                <form action="#" class="p-4 text-white">
                  <div class="form-group">
                      <label for="Number1"> Number 1</label>
                      <input type="text" class="form-control" id="num1" placeholder="Number 1">
                  </div>
                  <div class="form-group">
                      <label for="Number2"> Number 2</label>
                      <input type="text" class="form-control" id="num2" placeholder="Number 2">
                  </div>
                  <div class="form-group">
                      <label for="Number3"> Number 3</label>
                      <input type="text" class="form-control" id="num3" placeholder="Number 3">
                  </div>
                 
                  <button type="submit" class="btn btn-warning mb-3 mt-3 float-right" id="cal" onclick="myFunction()">Calculate</button>
                </form>
            </div>
          </div>
      </div>
  </div>
    
<script src="myfile.js" > </script> 
</body>
</html>

文件：myfile.js

//start of JavaScript code
    function myFunction() {
  // Get the input values, check for numbers, if there are letters returns numbers before letter per each field
  var num1 = parseFloat(document.getElementById("num1").value);
  var num2 = parseFloat(document.getElementById("num2").value);
  var num3 = parseFloat(document.getElementById("num3").value);

  // Check if the inputs are valid numbers
  if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
    alert("Please enter valid numbers."); //alerts if not valid numbers
    return;
  }

  // Calculate max, min, mean, and range
  var max = Math.max(num1, num2, num3); // Calculate the maximum value among the three numbers using math methods
  var min = Math.min(num1, num2, num3); // Calculate the minimum value among the three numbers using math methods
  var mean = (num1 + num2 + num3) / 3; // Calculate the mean of the three numbers
  var range = max - min; // Calculate the range 

  // Calculate median
  var numbers = [num1, num2, num3];
  numbers.sort(function(a, b) {
    return a - b;
  });
  var median;
  if (numbers.length % 2 === 0) {
    var mid1 = numbers[numbers.length / 2 - 1];
    var mid2 = numbers[numbers.length / 2];
    median = (mid1 + mid2) / 2; // Calculate the median for even count of numbers
  } else {
    median = numbers[Math.floor(numbers.length / 2)]; // Calculate the median for odd count of numbers
  }

  // Display the results
  document.getElementById("max").textContent = "max = " + max; // Display the maximum
  document.getElementById("min").textContent = "min = " + min; // Display the minimum
  document.getElementById("mean").textContent = "mean = " + mean.toFixed(1); // Display the mean with one decimal place
  document.getElementById("median").textContent = "median = " + median; // Display the median
  document.getElementById("range").textContent = "range = " + range; // Display the range
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.