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

Question

我试图通过递增和递减按钮来改变文本。我似乎无法找出为什么它不起作用。这是代码。

<body>
 <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 "];

   function inc() {
    var i = i++;
    return i;
   }

   function dec() {
    var i = i++;
    return i;
   }
   var decos = document.getElementById('deco');
   decos.addEventListener('click', inc);
   var incos = document.getElementById('inco');
   incos.addEventListener('click', dec);
   document.getElementById('the-h').innerHTML = 'word[i]';
   document.getElementById('the-p').innerHTML = 'explanation[i]';
 </script>
 <h1 id="the-h"></h1>
 <p id="the-p"></p>
 <input type="button" id="deco"><input type="button" id="inco">
</body>

Answer 1

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

将 <script> 移动到 <body> 的底部或使用 DOMContentLoaded 检查 DOM 是否准备好进行操作。
要将新值分配给数组中的 innerHTML，请不要在其周围使用引号。这会将字符串分配给 innerHTML，而不是数组中的实际值。
字符串应该在同一行完成，explanation数组中的字符串不要在同一行完成。那就是语法错误。或者您可以在多行字符串的每行末尾使用 \。
您的事件处理函数 inc() 和 dec() 实际上并没有更新 DOM，它们只是更新了代码中的一个变量。因此，用户在屏幕上看不到任何差异。

演示

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;

var wordLen = word.length - 1;


function updateHtml() {
  console.log(i);
  document.getElementById('the-h').innerHTML = word[i];
  document.getElementById('the-p').innerHTML = explanation[i];
}

function inc() {
  console.log(i);
  i = (i + 1) > wordLen ? 0 : ++i;
  updateHtml();
}

function dec() {
  i = (i - 1) < 0 ? wordLen : --i;
  updateHtml();
}

document.getElementById('deco').addEventListener('click', dec);
document.getElementById('inco').addEventListener('click', inc);

<h1 id="the-h"></h1>
<p id="the-p"></p>
<input type="button" id="deco" value="-" />
<input type="button" id="inco" value="+" />

Answer 2

这个有用吗？ http://jsfiddle.net/pczxceju/5/

<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>

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

Change text on button click event

javascript

arrays

text

click

innerhtml