Question

未捕获的类型错误：无法读取未定义的属性“style”-我已在 body 属性的底部添加了脚本

2021-04-19

89

javascript php mysql mapping

这是 twin city 的一个项目。该项目在我自己的服务器 - localhost 上运行得非常好。但是当我在 ionos 服务器上尝试时它却无法正常工作。如果您访问我的网站 sharminrony.co.uk 并点击 twin city 项目的链接，那么您将能够亲自看到错误。它只是在 ionos 服务器上无法正常工作，但在 localhost 中却可以正常工作。知道它出了什么问题吗？？

document.addEventListener("DOMContentLoaded", function(event) { 
//do work

var slideIndex = 1;

window.onload = function() {
    showDivs(slideIndex);**strong text**
};

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) 
  {
    slideIndex = 1
  }    

  if (n < 1) 
  {
    slideIndex = x.length
  }

  for (i = 0; i < x.length; i++) 
  {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";    //throwing error in this line
}

function openWeather(evt, day) {
  var i, tabcontent, tablinks, display;
  
  window.location.href='#weatherHours';

  tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");

  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  display = document.getElementsByClassName(day);

  for (var i=0; i < display.length; i+=1)
  {
    display[i].style.display = 'inline-block';
  }
  
  evt.currentTarget.className += " active";
}
});

Answer 1

您能否尝试添加检查来检查 x[slideIndex-1] 是否此时存在？我认为这可以解决您的问题。

if (x[slideIndex-1]) { x[slideIndex-1].style.display = "block";}

Answer 2

没有以 mySlides 作为类名的元素。

如您所见， mapping.js 中存在错误

像这样更改您的函数

function initialize(woeid) {
  var cityArray = []; // You have to put your variable here
  $.ajax({
    url: "php/getMapping.php",
    type: 'get',
    cache: false,
    success: function(overallArray) {
      for (var i = 0; i < overallArray.length; i++) {
        if (overallArray[i].woeid == woeid) {
          cityArray = overallArray[i];
          break;
        }
      }

      var cityHashTags = cityArray.hashTags.split(";");

      document.getElementById("cityTitle").innerHTML = cityArray.name;
      document.getElementById("rssLink").href = "php/getRssFeed.php?woeid=" + cityArray.woeid;
      document.getElementById("cityDescription").innerHTML = cityArray.desc;
      document.getElementById("cityPopulation").innerHTML = `Population: ${cityArray.curPop}`;
      document.getElementById("cityCountry").innerHTML = `Country: ${cityArray.country}`;
      document.getElementById("cityLat").innerHTML = `Lat : ${cityArray.lat}`;
      document.getElementById("cityLong").innerHTML = `Long : ${cityArray.lng}`;

      for (var j = 0; j < cityHashTags.length; j++) {
        document.getElementById("cityTwitter").innerHTML += "<a href='https://twitter.com/search?q=" + cityHashTags[j] + "' target='_blank'>#" + cityHashTags[j] + "</a>&nbsp&nbsp";
      }

      if (0 < cityArray.images.length) {
        for (var i = 0; i < cityArray.images.length; i++) {
          document.getElementById("cityPhotos").innerHTML += '<div class="w3-display-container mySlides w3-animate-opacity"><img src="pictures/poi/' + cityArray.images[i].imageFle + '" style="width:100%;height:100%;"><h4>' + cityArray.images[i].name + '</h4><p style="text-align:center;">' + cityArray.images[i].desc + '</p></div>';
        }
      }

      var mapCanvas = document.getElementById('mapCanvas');
      var mapOptions = {
        center: new google.maps.LatLng(cityArray.lat, cityArray.lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        disableDefaultUI: 1
      }
      var map = new google.maps.Map(mapCanvas, mapOptions);
      setMarkers(map, cityArray.poi);
    }
  });
}