javascript - 表单的 value 元素通过 php 或 javascript 不可见

Question

在index.php文件中，我在chart.js中做了一些代码，就是绘制三角形。一切都很好，直到我尝试动态使用它，它要么通过 javascript 获取默认值，要么通过 PHP 获取零。我用图片和代码上的形式加载值

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 >

使用 javascript，它总是给我带来相同的价值观

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;

使用 PHP，无论是 post 还是 get 方法，它始终为 0 下面是从表单获取值的 PHP 代码

    <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;

error.php文件上的图片如下

错误：未捕获的 SyntaxError：意外的令牌 '<'

我的 index.php 文件中的控制台输出：

如您所见，我只是尝试将这些值分配给我将在 chart.js 代码中使用的变量

我为您这边的一些具体问题添加了下面的代码。你可以跳过这个

  <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>

标签： javascriptphpformsasynchronoussynchronous