javascript - 无法使用javascript使用公共(public)变量(i)更改每张幻灯片的字体样式

Question

您好，我正在尝试更改每个图像的文本颜色和大小。但由于某种原因，dynamictextchanger 功能不起作用。

• 如果我注释掉 dynamictextchanger() 函数， slider 就可以正常工作!*如果我取消注释，则会抛出错误:

  Uncaught TypeError: Cannot set property 'src' of null"

有人可以告诉我我做错了什么吗？谢谢!

var i = 0;      
var images= [];
var time = 3000;  
var eventaction=0;
var timeoutId;

var nextbutton=document.querySelector("#rightbutton");
nextbutton.addEventListener("click",rightbuttonclick);

var prevbutton=document.querySelector("#leftbutton");
prevbutton.addEventListener("click",leftbuttonclick);

var dynamictext=document.querySelector("#dynamictext");




images[0] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2a7mu_VFGSn9oIwJtMg0tYwCgFH6Em_88T2gdkBwfPelDxK3E;
images[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFFK-qlqMGSmVVNFbB1icqaKAc_QUbgUL_QQiRRGdjXSAsF3qN"
images[2]="http://hdwpro.com/wp-content/uploads/2015/12/Nice-Image.png";
images[3]="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQsI34Fc-Tz7ej0M7JWG0a6EligJqUGN67fF0POqRlUVxighA8";
images[4]="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQNfmDWdslSTJ4TIHcGp3puqzbvLgGqapCkisZzN0Z-qPhIwVM";
images[5] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVBuPcK5axO-5e8Ypr5pJfQYZ0vmLBi-MScxreUWiNxyHUZnLQ";

images[6] = "https://www.elastic.co/assets/bltada7771f270d08f6/enhanced-buzz-1492-1379411828-15.jpg";
images[7] = "https://www.google.ca/search?q=images&rlz=1C1CHZL_enIN806IN806&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjshfLF49feAhUHuVkKHVgzCmwQ_AUIDigB&biw=1366&bih=657#imgrc=vz8YIOEWkR3WFM:";
images[8] = "https://www.google.ca/search?q=images&rlz=1C1CHZL_enIN806IN806&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjshfLF49feAhUHuVkKHVgzCmwQ_AUIDigB&biw=1366&bih=657#imgrc=lDILizkoMTqWqM:";

images[9] = "https://www.google.ca/search?q=images&rlz=1C1CHZL_enIN806IN806&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjshfLF49feAhUHuVkKHVgzCmwQ_AUIDigB&biw=1366&bih=657#imgdii=THJ48ya-dTxmAM:&imgrc=jPMshtpSBOZ_wM:";
images[10] = "http://webresizer.com/images2/bird1_after.jpg";
images[11] = "images/fried tofu.jpg";

images[12] = "images/rasamalai.jpg";
images[13] = "images/jamun.jpg";
images[14] = "images/basunthi.jpg";


function dynamictextchanger(i)
{
   if(i<2)
    {
      dynamictext.innerHTML="Starter";
      dynamictext.style.color="black";
    }
    else if(i>2 && i<5)
    {
      dynamictext.innerHTML="veg";
      dynamictext.style.color="green";
    }
    else if(i>5 && i<9)
    {
      dynamictext.innerHTML="nonveg";
      dynamitext.style.color="red";
    }
    else if(i>9 && i<11)
    {
      dynamictext.innerHTML="continental";
      dynamictext.style.color="purple";
    }
    else if(i>11 && i<15)
    {
      dynamictext.innerHTML="dessert";
      dynamictext.style.color="blue";
    }
}


function rightbuttonclick()
{
eventaction=1;
clearTimeout(timeoutId);
changeImg();
}

function leftbuttonclick()
{
eventaction=2;
clearTimeout(timeoutId);
changeImg();
}

function changeImg()
{
if(eventaction==1)
{
if(i<images.length-1) 
{
  i++;
 document.getElementById('sliders').src=images[i];
    eventaction=0;
 dynamictextchanger(i);
   
}else
{i=0;
document.getElementById('sliders').src=images[i];
eventaction=0;
dynamictextchanger(i);
}
}
else if(eventaction==2)
{
  i--;
  if(i<0)
  {i=images.length-1;
 document.getElementById('sliders').src=images[i];
  eventaction=0;
  dynamictextchanger(i);
  }else
{
  document.getElementById('sliders').src=images[i];
eventaction=0;
dynamictextchanger(i);
}
}
else
{
if(i<images.length-1)
{i++;
}else
{i=0;}
dynamictextchanger(i);
document.getElementById('sliders').src=images[i];
eventaction=0;

} 
timeoutId=setTimeout("changeImg()", time);
}


// Run function when page loads
window.onload=changeImg;

 <p id="dynamictext"/>
    <button class="button button3" id="leftbutton"> <span class="glyphicon glyphicon-chevron-left"></span></button>
    <img id="sliders"/>

        <button class="button button3" id="rightbutton" ><span class="glyphicon glyphicon-chevron-right"></span></button>

Answer 1

因为这不是您关闭 <p> 的方式标签

<p id="dynamictext"></p> <!-- change to this -->