Question

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: