在php include上设置javascript变量_Javascript_Php

在php include上设置javascript变量

javascript php

在php include上设置javascript变量,javascript,php,Javascript,Php,我有一个带有多个链接的html，它向Handler.php文件发送Get请求，如 <a href="Handler?Node=FirstGroup"><div class="MyClass">First Group</div></a> <a href="Handler?Node=SecondGroup"><div class="MyClass">Second Group</div></a> 我的问题

我有一个带有多个链接的html，它向

Handler.php

文件发送Get请求，如

<a href="Handler?Node=FirstGroup"><div class="MyClass">First Group</div></a>
<a href="Handler?Node=SecondGroup"><div class="MyClass">Second Group</div></a>

我的问题在于

Header.php

。虽然我在浏览器中看到javascript（使用F12），但inspector show警告

类型错误：幻灯片[（slideIndex-1）]未定义，并且第一张幻灯片未显示（脚本用于显示多张照片，一张接一张）
我的Header.php
文件如下：
<!DOCTYPE html>

<html>
<head>
    <title>The Title</title>
    <link href="../Files/EB.css" rel="stylesheet" type="text/css" />
    <link rel="icon" href="../Files/Images/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

</head>

<body>


标题
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

请注意，slideIndex
是在脚本中定义的
我的问题是：浏览器在从php加载javascript后“读取”javascript，并不是在所有情况下都定义showsileds
函数slideIndex

它在n>幻灯片的位置定义。长度

它还可以在n<1
中定义
否则，它是未定义的
在上面的代码中，您将n
作为1
传递到函数中，因此，如果有多个幻灯片，slideIndex
保持未定义状态。
您可以将滑块动作的开始放在document.ready函数中。就是这样！解决了，非常感谢！也许我应该更深入地检查代码。无论如何，通过插入slideIndex=1解决了问题
在文档中。addEventListener（“DOMContentLoaded”，function（）{}。现在所有图像都已正确显示。谢谢！
<!DOCTYPE html>

<html>
<head>
    <title>The Title</title>
    <link href="../Files/EB.css" rel="stylesheet" type="text/css" />
    <link rel="icon" href="../Files/Images/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

</head>

<body>