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

时间：2017-12-30 15:30:22

标签： javascript wordpress

我正在使用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相关的链接，而且我已经在我的标头中导入了另一个，因此代码的每个部分都是相同的{ {3}}（它所在的网站）和codepen上的网站。

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

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

谢谢

1 个答案:

答案 0 :(得分：0)

您的代码的第一个问题是js在呈现html之前工作，这意味着任何尝试从html获取值的任何内容都将返回undefined，null。

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

jQuery(document).ready(function(){ //your code write here });

相关问题
最新问题