JS无法正常工作（Uncaught TypeError：无法读取属性'querySelectorAll'的null）

问题描述 投票：-3回答：1

我正在与WordPress建立一个网站，我已经改编了codepen的代码，创建了my version of it以在网站上实现它。

var slideshow = document.querySelector('[data-slideshow]')
    slides = slideshow.querySelectorAll('[data-slide]')
for (j=0;j<slides.length;j++){
  slides[j].setAttribute('data-slide',j)
}
var count = 0
function move(direction){
  if (direction == 'prev'){
    if (document.querySelector('[data-slideshow] [data-slide="'+(count-1)+'"]')){
      document.querySelector('[data-slideshow] [data-slide="'+(count-1)+'"]').style.left = '-100vw'
    }
    document.querySelector('[data-slideshow] [data-slide="'+count+'"]').style.left = '0'
    if (document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]')){
      document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]').style.left = '100vw'
    }
    if (count-1 >= 0){
      count--
    }
  }
  if (direction == 'next'){
    document.querySelector('[data-slideshow] [data-slide="'+count+'"]').style.left = '-100vw'
    if (document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]')){
      document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]').style.left = '0'
    }
    if (document.querySelector('[data-slideshow] [data-slide="'+(count+2)+'"]')){
      document.querySelector('[data-slideshow] [data-slide="'+(count+2)+'"]').style.left = '100vw'
      count++
    }
  }
}
// Arrow keys to navigate
document.onkeyup = function(e){
  e.preventDefault()
  var charCode = e.which;
  charCode==37 && move('prev')
  charCode==39 && move('next')
}
// Swipe to Navigate
var gesture = {
      x: [],
      y: [],
      match: ''
    },
    tolerance = 100;
window.addEventListener('touchstart',function(e){
  e.preventDefault()
  for (var i=0; i<e.touches.length; i++){
    var dot = document.createElement('div');
    dot.id = i
    dot.style.top = e.touches[i].clientY-25+'px'
    dot.style.left = e.touches[i].clientX-25+'px'
    document.body.appendChild(dot)
    gesture.x.push(e.touches[i].clientX)
    gesture.y.push(e.touches[i].clientY)
  }
});
window.addEventListener('touchmove',function(e){
  for (var i=0; i<e.touches.length; i++) {
    var dot = document.getElementById(i);
    dot.style.top = e.touches[i].clientY-25+'px'
    dot.style.left = e.touches[i].clientX-25+'px'
    gesture.x.push(e.touches[i].clientX)
    gesture.y.push(e.touches[i].clientY)
  }
});
window.addEventListener('touchend',function(e){
  var dots = document.querySelectorAll('div'),
      xTravel = gesture.x[gesture.x.length-1] - gesture.x[0],
      yTravel = gesture.y[gesture.y.length-1] - gesture.y[0];
  if (yTravel<tolerance && yTravel>-tolerance && xTravel<-tolerance){
    move('next')
  }
  if (yTravel<tolerance && yTravel>-tolerance && xTravel>tolerance){
    move('prev')
  }
  gesture.x = []
  gesture.y = []
  gesture.match = xTravel = yTravel = ''
  for (i=0;i<dots.length;i++){
    dots[i].id = ''
    dots[i].style.opacity = 1
    setTimeout(function(){
      document.body.removeChild(dots[i])
    },1000)
  }
})
html,body {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Roboto Slab', serif;
}

#icebtools ::-webkit-scrollbar { 
    display: none; 
}

p {
    font-weight: 200;
}

b {
  font-weight: 600;
}

.slide {
  width: 100%;
  color: white;
}

#post {
  background: #0677A4;
}

#post ::selection {
  background-color: #79cbf1 !important;
  text-shadow: #066D8C 2px 2px 2px ;
}

#interp {
  background: #974198;
}


 #interp ::selection {
 background-color: #d6b7da !important;
  text-shadow: #5d068c 2px 2px 2px;
}


#sources {
  background: #7FBA48;
}

#sources ::selection {
 background-color: #d1f5b5 !important;
    text-shadow: #226b18 2px 2px 2px;
}

#fakenews {
  background: #F16060;
}

#fakenews ::selection {
  background-color: #f7cbca !important;
    text-shadow: #d40000 2px 2px 2px;
}

#journal {
  background: #D77A27;
}

#journal ::selection {
  background-color: #FEC20F !important;
    text-shadow: #846000 2px 2px 2px;
}

#images {
  background: #D23182;
}

#images ::selection {
    background-color: #f3bbd8 !important;
    text-shadow: #840063 2px 2px 2px;
}

#numbers {
  background: #6DB7E5;
}

#numbers ::selection {
  background-color: #07a8e2 !important;
    text-shadow: #493cbf 2px 2px 2px;
}

.slide h1 {
    text-align: center;
  color: white;
    text-shadow: none;
  padding-bottom: 50px;
}
#content-slide {
  width: 60%;
  margin: 0 auto;
}

.section {
  float: left;
  width: 33%;
}

.section p {
  text-align: justify;
  width: 80%;
  margin: 0 auto
}

.section2 {
  float: left;
  width: 45%;
  padding-left: 20px;
  padding-right: 20px;
}

.section2 p {
  float: right;
  text-align: justify;
  direction:rtl;
  width: 70%;
}

.section3 {
  float: left;
  width: 45%;
  padding-left: 20px;
  padding-right: 20px;
}

.section3 p {
  float: left;
  text-align: justify;
  direction:ltr;
  width: 70%;
}

.section-line {
  
  width: 100px;
  float: left;
  
}

.section-linetxt  {
    float: left;
  width: 70%;
    
}

#journalp p {
  width: 100%;
  direction: ltr;
}

#pbr {
     padding-bottom: 20%;
    padding-top: 10%;
}

#fb-link img {
  display: block;
  margin: 0 auto;
  margin-top: 45%;
  width: 40px;
  -webkit-filter: invert(100%);
    filter: invert(100%);
}

#eximg img{
  width:80%;
  display: block;
  margin: 0 auto;
}

#eximg2 img {
  width: 55%;
  display: block;
  float: left;
}

#eximg3 img {
   width: 55%;
  display: block;
  float: right;
}

#btm-txt {
  height: 300px;
  bottom: 0;
}

[data-slideshow] {
  margin: 0;
  padding: 0;
  position: relative;
}
[data-slide] {
  position: absolute;
  left: 100vmax;
  z-index: 50;
  transition: left .5s ease-in-out;
  overflow-y: scroll;
}
[data-slide]:first-of-type {
  left: 0;
}
[data-slideshow] nav {
  margin: 0;
  padding: 0;
  position: fixed;
  bottom: 1em;  
  top: 45%;
  z-index: 100;
}

#nav-left {
  left: .75em;
}

#nav-right {
  right: .75em;
}
[data-slideshow] nav input {
  font-size: 50pt !important;
  margin: 0 .25em !important;
  width: auto !important;
  min-width: 2.25em;
  background: rgba(0,0,0,0) !important;
  color: white !important;
  border-radius: 2px;
  text-shadow: rgba(0,0,0,.7) 1px 1px 0 !important;
  transition: color .1s ease-in-out;
  border: none;
}

#btn-bck{
  float: left;
}

#btn-nxt {
  float: right
}

[data-slideshow] nav input:focus,
[data-slideshow] nav input:hover {
  color: white !important;
  background: rgba(0,0,0,0) !important;
  border: none;
  border-radius: 50%;
}
[data-slideshow] nav input:active {
  color: #0cf !important;
  background: rgba(0,0,0,0) !important;
  border: none;
  border-radius: 50%;
}
[data-slide] h1 {
  margin: 10vmin 0 4vmin 0 !important;
  font-size: 12vmin !important;
}
[data-slide] h1 + h2 {
  margin-top: -4vmin !important;
}


@media (orientation: portrait) {
  [data-slideshow],
  [data-slide] {
    width: 100vmin;
    height: 100vmax;
  }
}
@media (orientation: landscape) {
  [data-slideshow],
  [data-slide] {
    width: 100vmax;
    height: 100vmin;
  }
}
<section data-slideshow id="icebtools">
  <article data-slide class="slide" id="post">
  <h1> Post </h1>
  
  <div id="content-slide">
    <div class="section" id="eximg">
     <img src="https://i.imgur.com/7NguRlq.png">
    </div>
    
    <div class="section" id="fb-link">
      <a href="www.facebook.com"><img src="https://image.flaticon.com/icons/svg/33/33702.svg"></a>
    </div>
    
    <div class="section">
      <p>Questo strumento ha l'obiettivo di far "ascoltare più <b>campane</b>". Sulla pagina facebook dedicata, condivideremo i post di politici e personaggi eminenti, suddivisi per argomento. Questi post andranno a riempire un <b>archivio pubblico</b> con due funzioni:
        <b>Informarsi velocemente</b> (ad esempio in vista delle elezioni) e verificare la <b>coerenza</b> dei politici a distanza di tempo. Sarà infatti possibile, grazie ad una ricerca interna, cliccare sul politico interessato, digitare l'argomento su cui ci si
        vuole informare e automaticamente si aprirà una schermata con tutti i post che quel politico ha scritto su quel determinato argomento.</p>
    </div>
  </div>

  </article>
  
  <article data-slide id="interp" class="slide">
      <h1> Interpretation </h1>
  
  <div id="content-slide">
    <div class="section">
     <p>Ci troviamo nella maggior parte dei casi di fronte non al l'informazione ma all'interpretazione dell'informazione. I giornali interpretano, i politici interpretano. Per questo motivo Iceberg Interpretation metterà a disposizione degli utenti l'informazione oggettiva seguita da più pareri e interpretazioni. L'obiettivo è rendere consapevoli del fatto che ogni notizia è soggetta ad interpretazione ed è bene analizzarle tutte per avere un quadro trasparente della realtà</p>
    </div>
    
    <div class="section" id="eximg">
      <img src="https://i.imgur.com/sOGQSI0.png">
    </div>
    
    <div class="section" id="btm-txt">
      <p>               Investiamo così nella creazione del senso critico, spingendo alla riflessione per combattere l'innata spinta dell'uomo ad informarsi solo su fonti che confermano le proprie idee. Inoltre, in questa sezione, un'interessante ed innovativa interpretazione avverrà grazie allo studio del linguaggio del corpo. Degli esperti del settore analizzeranno i discorsi dei più eminenti politici e studieranno il linguaggio del corpo che costituisce il 70% del messaggio comunicativo, andremo sotto la punta dell'iceberg.</p>
    </div>
  </div>
  </article>
  
  <article data-slide class="slide" id="sources">
  <h1> Sources </h1>
  
         <div id="content-slide">
        <div class="section">
      <p> Questo strumento, che ha una sua propria pagina Facebook, condividerà solo informazioni provenienti da siti ufficiali. Le fonti saranno quindi il sito del governo e dei vari ministeri. Può sembrare scontato, ma in realtà ogni giorno i funzionari di governo hanno incontri, firmano atti, fanno proposte e molto altro, e una nostra attenta osservazione ai siti di informazione ci ha fatto notare come la maggior parte di queste notizie non vengano riportate. Riteniamo che per approvare o criticare l'operato del nostro governo sia necessario essere a conoscenza di quello che ogni giorno fa. 
      </p>
    </div>
 
    
    <div class="section" id="fb-link">
      <a href="www.facebook.com"><img src="https://image.flaticon.com/icons/svg/33/33702.svg"></a>
    </div>
    

    <div class="section" id="eximg">
     <img src="https://i.imgur.com/by34JOY.png">
    </div>
    

  </div>

  </article>
  
   
   
 <article data-slide class="slide" id="fakenews">
  <h1> Fake News </h1>
  
         <div id="content-slide">
        <div class="section2">
      <p> Questo strumento tratterà il delicato problema delle bufale. Vi saranno delle analisi sulle notizie false o parzialmente vere e analisi sulle fonti tendenzialmente poco attendibili.
Iceberg official site: questo strumento, che ha una sua propria pagina facebook, condividerà solo informazioni provenienti da siti ufficiali. Le fonti saranno quindi il sito del governo e dei vari ministeri. Può sembrare scontato, ma in realtà ogni giorno i funzionari di governo hanno incontri, firmano atti, fanno proposte e molto altro, e una nostra attenta osservazione ai siti di informazione ci ha fatto notare come la maggior parte di queste notizie non vengano riportate. Riteniamo che per approvare o criticare l'operato del nostro governo sia necessario essere a conoscenza di quello che ogni giorno fa
      </p>
    </div>

    <div class="section2" id="eximg2">
     <img src="https://i.imgur.com/x3BGonq.png">
    </div>
    

  </div>
 </article>
  
  <article data-slide class="slide" id="journal">
  <h1> Journal </h1>
  
 
   <div id="content-slide">
    
    
        <div class="section2" id="journalp">
          
                 
    <div class="section-line">
          <img src="https://i.imgur.com/r7vE3OA.png">
    </div>
          
          <div class="section-linetxt">
      <p id="pbr"> Questo strumento ci terrà informati solo sul campo internazionale. Tradurremo articoli di grandi <b>testate straniere</b>, tra cui quelle orientali; l'obiettivo è spingere il lettore a riflettere su cosa "dicono a noi" e su cosa "dicono a loro", per riuscire a farsi un'idea più trasparente di quello che accade nel mondo.
      </p>
          
         <p>
           L'obiettivo ultimo sarà quello di realizzare un giornale indipendente con foto, articoli, video e tutti i contenuti con cui potremo stimolare la riflessione su quello che succede fuori dal nostro paese.
          </p>
          </div>
    </div>

    <div class="section2" id="eximg3">
     <img src="https://i.imgur.com/TV0CwxZ.png">
    </div>
    

  </div>
  </article>
  
  <article data-slide class="slide" id="images">
  <h1> Images </h1>
  
        <div id="content-slide">
        <div class="section2">
      <p>Questo strumento pubblicherà vignette, meme e brevi storie raccontate sotto forma di fumetto. Lo scopo sarà quello di spingere alla riflessione utilizzando la SATIRA e l'arte del disegno.
      </p>
    </div>

    <div class="section2" id="eximg2">
     <img src="https://s9.postimg.org/vvjyp10fj/iceberg_section-11.png">
    </div>
    
    

  </div>
 </article>
  
  <article data-slide class="slide" id="numbers">
  <h1>Numbers</h1>
  
  <div id="content-slide">  
    
    <div class="section2" id="eximg3">
     <img src="https://i.imgur.com/eJJfoAy.png">
    </div>
    
         
        <div class="section3">
      <p>Questo strumento tratterà i numeri. Verranno quindi riportati i dati come l'andamento del PIL, debito pubblico, spese, entrate ecc. e saranno inoltre pubblicati diversi SONDAGGI.
      </p>
    </div>

    

  </div>
 </article>
  
  <nav id="nav-left">
    <input id="btn-bck" type=button data-button=outline value=&lt; onclick=move('prev') ontouchstart=move('prev')>
     </nav>
    <nav id="nav-right">
    <input  id="btn-nxt" type=button data-button=outline value=&gt; onclick=move('next') ontouchstart=move('next')>
 </nav>
</section>

一切都在codepen工作正常，你可以看到没有与JavaScript相关的链接，而且我已经在我的标题中导入了另一个，所以代码的每个部分都是相同的here（它去的网站）和那里的codepen 。

但如果您在网站内的控制台中查看，您可以看到querySelectorAll无法读取[数据幻灯片]，我真的不太了解JavaScript所以我被困在这里不知道该怎么做。

在我的WordPress cms上，只有4个插件主要用于语法高亮和编码，没有什么可以干扰。

谢谢

javascript wordpress
1个回答
0
投票

你的代码的第一个问题是js在你的html渲染之前工作，这意味着任何试图从html获取值将返回undefined，null。

首先，您需要在页脚中运行脚本，或者像这样包装它（因为您使用的是wordpress，因此默认情况下将加载qazxsw poi库）

jquery

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.