Javascript 更改按钮单击事件上的文本_Javascript_Arrays_Text_Click_Innerhtml

Javascript 更改按钮单击事件上的文本

javascript arrays text

Javascript 更改按钮单击事件上的文本,javascript,arrays,text,click,innerhtml,Javascript,Arrays,Text,Click,Innerhtml,我试图通过按钮的递增和递减来改变文本。我似乎不明白为什么它不起作用。这是密码 var word=[“变得懒惰”、“香农”、“莱托加斯姆”、“fleek”]； var解释=[“变得懒惰是在被拒绝后躺在地上的行为摔得很重或摔得很重。最常用于滑冰者、bmx车手和其他极端的运动员体育 ", " 世界上最酷的人。 ", " Echelon和任何其他人使用的词 Jared Leto fan描述了与性相关的（性）愉悦/幸福感观看Jared Leto/30秒到火星的音乐视频或电影。换句话说，Jare

我试图通过按钮的递增和递减来改变文本。我似乎不明白为什么它不起作用。这是密码


var word=[“变得懒惰”、“香农”、“莱托加斯姆”、“fleek”]；
var解释=[“变得懒惰是在被拒绝后躺在地上的行为
摔得很重或摔得很重。最常用于滑冰者、bmx车手和其他极端的运动员
体育
",  "
世界上最酷的人。
", "
Echelon和任何其他人使用的词
Jared Leto fan描述了与性相关的（性）愉悦/幸福感
观看Jared Leto/30秒到火星的音乐视频或电影。换句话说，Jared Leto
诱导性高潮。
", "
关于“]”点；
功能公司{
变量i=i++；
返回i；
}
函数dec（）{
变量i=i++；
返回i；
}
var decos=document.getElementById（'deco'）；
decos.addEventListener（'click'，inc.）；
var incos=document.getElementById（'inco'）；
incos.addEventListener（“点击”，十二月）；
document.getElementById（'the-h'）。innerHTML='word[i]'；
document.getElementById（'the-p'）。innerHTML='explaution[i]'；

您的代码中有许多错误。请参阅下面的代码

将

移动到

的底部，或使用

DOMContentLoaded

检查DOM是否准备好进行操作

要将新值分配给来自数组的

innerHTML

，请不要在其周围使用引号。这将把字符串分配给

innerHTML

，而不是数组中的实际值

字符串应在同一行上完成，

解释

数组中的字符串不在同一行上完成。这就是语法错误。也可以在多行字符串的每行末尾使用

事件处理程序函数

inc（）

和

dec（）

实际上并不更新

DOM

，它们只是更新代码中的一个变量。因此，用户无法在屏幕上看到任何差异

演示

var-word=[“变得懒惰”、“香农”、“莱托加斯姆”、“fleek”]；
var解释=[“变得懒惰是在被猛击或重重摔倒后躺在地上的行为。最常用于滑冰者、bmx车手和其他极限运动。”，“世界上最酷的人。”，“Echelon和任何其他Jared Leto粉丝用来描述（性）感觉的词”与观看杰瑞德·莱托（Jared Leto）与火星相距30秒的音乐视频或电影相关的快乐/幸福。换句话说，杰瑞德·莱托（Jared Leto）能引起性高潮。”，“切中要点”]；
var i=0；
var-wordLen=word.length-1；
函数updateHtml（）{
控制台日志（i）；
document.getElementById（'the-h'）.innerHTML=word[i]；
document.getElementById（'the-p'）.innerHTML=解释[i]；
}
功能公司{
控制台日志（i）；
i=（i+1）>wordLen？0:+i；
updateHtml（）；
}
函数dec（）{
i=（i-1）<0？wordLen:--i；
updateHtml（）；
}
document.getElementById（'deco'）。addEventListener（'click'，dec'）；
document.getElementById（'inco'）。addEventListener（'click'，inc'）


这行吗


var word=[“变得懒惰”、“香农”、“莱托加斯姆”、“fleek”]；
var解释=[“变得懒惰是在被猛击或重重摔倒后躺在地上的行为。最常用于滑冰者、bmx车手和其他极限运动。”，“世界上最酷的人。”，“Echelon和任何其他Jared Leto粉丝用来描述（性）感觉的词”与观看杰瑞德·莱托（Jared Leto）与火星相距30秒的音乐视频或电影相关的快乐/幸福。换句话说，杰瑞德·莱托（Jared Leto）能引起性高潮。”，“切中要点”]；
var i=0；
函数updateDiv（id、内容）{
document.getElementById（id）.innerHTML=content；
}
功能计数器（步进）{
if（字[i+步]！==未定义）{
i+=阶跃；
}否则{
步长<0？i=word.length-1:i=0；
}
updateDiv（'the-h'，单词[i]）；
updateDiv（'the-p'，解释[i]）；
}
updateDiv（'the-h'，单词[i]）；
updateDiv（'the-p'，解释[i]）；
var decos=document.getElementById（'deco'）；
decos.addEventListener（'click'，function（）{
计数器（-1）；
}，假）；
var incos=document.getElementById（'inco'）；
incos.addEventListener（'click'，function（）{
计数器（+1）；
}，假）；
当您第一次单击-
按钮或继续单击+button@verjas如果是这样的话，我想用另一个问题逗你开心如果我有很多这样的文本值，我不会想要一个大的js文件。我怎么能把它们放在一个额外的JSON或类似的东西中呢？你可以简单地把大数组放在一个不同的js文件中，然后把它们放在页面的顶部（在中）：（如果是一个大文件，可能会减慢页面的加载速度）|或者您只能在需要时使用AJAXI guest加载它们。最好的选择是不将它们放在js文件中，而是放在数据库中，然后从那里加载它们。。。这将允许您更轻松地管理描述，如进行更改和插入。但这是一种不同的方法，您需要一个全新的代码。：）
<body>
<h1 id="the-h"></h1>
<p id="the-p"></p>
<input type="button" id="deco"><input type="button" id="inco">

<script type="text/javascript">
var word = ["Getting lazy", "Shannon", "Letogasm", "fleek"];
var explanation = ["Getting lazy is the act of just laying on the ground after being slammed or a hard fall. Most commonly used amongst skaters, bmx riders, and other extreme sports.",  "The coolest person in the world. ", "Word used by Echelon and any other Jared Leto fan to describe the feeling of (sexual) pleasure/happiness associated with watching a Jared Leto/30 Second to Mars Music Video or Movie. In other words, a Jared Leto induced Orgasm.", "on point "];

var i=0;

function updateDiv(id, content) {
     document.getElementById(id).innerHTML = content;
}

function counter (step){
      if (word[i+step] !== undefined) {
           i+=step;
      }  else {
           step < 0 ? i=word.length-1 : i=0;
      }
      updateDiv('the-h',word[i]);
      updateDiv('the-p',explanation[i]);   
}

updateDiv('the-h',word[i]);
updateDiv('the-p',explanation[i]);

var decos = document.getElementById('deco');
decos.addEventListener('click', function() {
     counter(-1);
}, false);
var incos = document.getElementById('inco');
incos.addEventListener('click', function() {
     counter(+1);
}, false);

</script>

</body>