D3 Examples - Line intersection

xxxxxxxxxx
 
<html>
  <head>
    <style>
        div {
            margin-bottom: 10px;
        }
        span {
          margin: 5px;
        }
        
        input {
          margin: 5px;
          padding: 5px;
        }
    </style>
    <script src="intersection.js"></script>
    <script>
      function calculate(){
        var x1 = parseInt(document.getElementById("x1").value.trim());
        var x2 = parseInt(document.getElementById("x2").value.trim());
        var x3 = parseInt(document.getElementById("x3").value.trim());
        var x4 = parseInt(document.getElementById("x4").value.trim());
        var y1 = parseInt(document.getElementById("y1").value.trim());
        var y2 = parseInt(document.getElementById("y2").value.trim());
        var y3 = parseInt(document.getElementById("y3").value.trim());
        var y4 = parseInt(document.getElementById("y4").value.trim());
        
        if(isFinite(x1) && isFinite(x2) && isFinite(x3) && isFinite(x4) && isFinite(y1) && isFinite(y2) && isFinite(y3) && isFinite(y4)){
            var points = [[x1,y1],[x2,y2],[x3,y3],[x4,y4]]; // intersacting
            document.getElementById("result").innerHTML = getIntersectionPoint(points);
        }
        else {
          document.getElementById("result").innerHTML = "ERROR !!!";
        }
      }
    </script>
  </head>
  <body>
    <div>Point 1<span></span><span>x:</span><input id="x1" value="15" onChange="calculate()" /> <span>y:</span><input id="y1" value="10" onChange="calculate()" /></div>
    <div>Point 2<span></span><span>x:</span><input id="x2" value="49" onChange="calculate()" /> <span>y:</span><input id="y2" value="25" onChange="calculate()" /></div>
    <div>Point 3<span></span><span>x:</span><input id="x3" value="29" onChange="calculate()" /> <span>y:</span><input id="y3" value="50" onChange="calculate()" /></div>
    <div>Point 4<span></span><span>x:</span><input id="x4" value="32" onChange="calculate()" /> <span>y:</span><input id="y4" value="32" onChange="calculate()" /></div>
    <hr>
    <div id="result" style="color:red"></div>
    <script>
      calculate();
    </script>
  </body>
</html>
    