javascript - 无法使用 javascript 使用公共变量(i)更改每张幻灯片的字体样式
问题描述
您好我正在尝试更改每个图像的文本颜色和大小。但由于某种原因,dynamictextchanger 功能不起作用。
- 如果我注释掉 dynamictextchanger() 函数,滑块可以正常工作!*如果我取消注释,则会引发错误:
未捕获的类型错误:无法设置属性 '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>
解决方案
因为这不是你关闭<p>
标签的方式
<p id="dynamictext"></p> <!-- change to this -->
推荐阅读
- c# - ElasticSearch 索引适用于 REST API,但不适用于 C# 代码
- java - 如何在不删除所有子节点的情况下从 Firebase 中删除一个子节点
- java - 尽管提交了帖子,但 Java mysql-connector ClassNotFoundException
- twitter-bootstrap - 如何从 Bootstrap 4 表单上的错误消息中删除空格
- python - 如何解码 gerrit 代码审查 rest api 响应
- react-native - 带有反应导航的反应原生:标题未显示在屏幕中
- bash - 如何在 Unix 中提取第三大文件大小
- jquery - 用轮播隐藏溢出
- php - Laravel 无法声明类 Symfony\Component\HttpFoundation\AcceptHeader,因为该名称已在使用中
- c++ - cocos2d-x 每次我需要它或只是改变它的纹理时制作一个精灵的最佳实践是什么?