The form's value element isn't visible via php or javascript

Question

In the index.php file, I have done some code in chart.js, which is drawn triangles. Everything is fine until I try to use it dynamically, it is either takes the default values via javascript or just zeroes via PHP. I load values with form such as that on the picture and the code

HTML
<form method="get" action="index.php"  >


<div class="form-group">
  <label for="Tpoint1"  class="form-label">Перша точка основи трикутника</label><br>
  <div class="row" id="Tpoint1">
    <div class="col-4"><input type="number" value=6 name="Tpoint1x" class="form-control"></div>
    <div class="col-2">
      <p>X</p>
    </div>  <div class="col-4"><input type="number" value=20  name="Tpoint1y" class="form-control">
    </div><div class="col-2">
      <p>Y</p>
    </div>
  </div>
  <label for="Tpoint2"  class="form-label">Друга точка вершини трикутника</label><br>
  <div class="row" id="Tpoint2">
    <div class="col-4"><input  type="number" value=50   name="Tpoint2x" class="form-control"></div>
    <div class="col-2">
      <p>X</p>
    </div>  <div class="col-4"> <input type="number" value=300 name="Tpoint2y" class="form-control">
    </div><div class="col-2">
      <p>Y</p>
    </div>
  </div>
  <label for="Theight"  class="form-label">Висота трикутника</label><br>
  <input type="number" id="Theight"  name="Theight" value=60 class="form-control">
  <button id = "TriangleSubmition"type="submit" name="drawTriangle" class="btn btn-primary">Намалювати трикутник</button>
  </div>
</form >

with javascript, it brings me always the same values

JavaScript
 var number1x =+ document.forms[0][0].value;
var number1y =+ document.forms[0][1].value;
var number2x =+document.forms[0][2].value;
var number2y =+ document.forms[0][3].value;
var theight =+ document.forms[0][4].value;

using PHP, either post or get method it is always 0 Here below is the PHP code getting values from the form

    <script  >
   <?php

       $x1 = ($_GET["Tpoint1x"]);
        $y1 = ($_GET["Tpoint1y"]);
       $x2 = ($_GET["Tpoint2x"]);
        $y2 = ($_GET["Tpoint2y"]);
        $h = ($_GET["Theight"]); 
     ?>

var number1x = +"<?php $x1;?>";
var number1y = +"<?php $y2;?>";
var number2x =+"<?php $x2;?>";
var number2y = +"<?php $y2;?>";
var theight = +"<?php $h;?>";
var Xpoint3 = 0;
var Ypoint3 = 0;

The picture as follows on the error.php file

error: Uncaught SyntaxError: Unexpected token '<'

console output in my index.php file:

As you have seen, I just try to assign these values to variables which I will use in the chart.js code

The code below I have added for some specific issues on your side. You can just skip this

  <script  >
   <?php

       $x1 = ($_GET["Tpoint1x"]);
        $y1 = ($_GET["Tpoint1y"]);
       $x2 = ($_GET["Tpoint2x"]);
        $y2 = ($_GET["Tpoint2y"]);
        $h = ($_GET["Theight"]); 
     ?>

var number1x = +"<?php $x1;?>";
var number1y = +"<?php $y2;?>";
var number2x =+"<?php $x2;?>";
var number2y = +"<?php $y2;?>";
var theight = +"<?php $h;?>";
var Xpoint3 = 0;
var Ypoint3 = 0;
  if(number1x == number2x ){
    var Ypoint3x = ((number1x+number2x)/2)
    Ypoint3 = ((number1y+number2y)/2)
     Xpoint3 = Ypoint3x+theight;
  }
  if(number1y == number2y ){
  var Ypoint3x = ((number1x+number2x)/2)
  Ypoint3 = ((number1y+number2y)/2)
   Xpoint3 = Ypoint3x+theight;
  }
  else{
  Xpoint3 = number1x
  Ypoint3 = number2y
  }
var  xyValues = [
   {x:Xpoint3, y:Ypoint3},
   {x:number1x, y:number1y},
   {x:number2x, y:number2y},
   {x:Xpoint3, y:Ypoint3}
 ];



  let myChart = document.getElementById('canvas').getContext('2d');
  let MassPopChart = new Chart(myChart, {

      type: 'scatter',
      data: {
        datasets: [{
          type: 'line',
             data:   xyValues,
           fill:{
                       },
            borderColor: 'rgb(75, 192, 192)'

     }]},
 options: {
   responsive: true,
   plugins: {
     title: {
       display: true,
       text: 'Triagles :) :( :| '
     }
   },

   scales: {
     x: {
       min: -500,
       max: 500,

       ticks: {
          // forces step size to be 50 units
          stepSize: 50
        }
     },
     y: {

       min: -1000,
       max: 1000,
       ticks: {
          // forces step size to be 50 units
          stepSize: 25
        }
     }
   }
 }
  });

  </script>