form js.html

<html>
  <head>
    <title>Array Difference</title>
  </head>
  <body>
    <form id="myForm">
      <label for="arr1">Array 1:</label>
      <input type="text" id="arr1" name="arr1" placeholder="Enter array 1 (comma-separated values)"><br><br>
      <label for="arr2">Array 2:</label>
      <input type="text" id="arr2" name="arr2" placeholder="Enter array 2 (comma-separated values)"><br><br>
      <input type="submit" value="Get Difference">
    </form>

    <div id="result"></div>

    <script>
      // Get the form elements
      const form = document.getElementById("myForm");
      const arr1Input = document.getElementById("arr1");
      const arr2Input = document.getElementById("arr2");
      const resultDiv = document.getElementById("result");

      // Add an event listener to the form submit event
      form.addEventListener("submit", (e) => {
        e.preventDefault();

        // Get the input values from the form
        const arr1 = arr1Input.value.split(",");
        const arr2 = arr2Input.value.split(",");

        // Call the function to get the difference
        const result = getDifference(arr1, arr2);

        // Display the result
        resultDiv.innerText = `Result: ${result.join(", ")}`;
      });

      // Function to get the difference between two arrays
      function getDifference(arr1, arr2) {
        return arr1.filter((element) => !arr2.includes(element));
      }
    </script>
  </body>
</html>