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

【问题标题】：Change text on button click event更改按钮单击事件上的文本
【发布时间】：2015-10-14 18:11:27
【问题描述】：

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

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

【问题讨论】：

标签： javascript arrays text click innerhtml

【解决方案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="+" />

【讨论】：

【解决方案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>

【讨论】：

第一次点击-按钮无效，或者一直点击+按钮无效
@verjas 如果是这样的话，我想用另一个问题来逗你开心.. :P
如果我有很多这样的文本值并且我不想要一个大的 js 文件怎么办。我怎么能把它们放在额外的 JSON 或类似的东西中？
您可以简单地将大数组放在不同的 js 文件中，然后将它们包含在页面顶部（在中）：
我来宾最好的选择是不要将它们放在 js 文件中，而是放在数据库中，然后从那里加载它们...这将使您可以更轻松地管理描述，例如 make更改和插入。但这是一种不同的方法，您需要一个全新的代码。 :)