Change text on button click event

Question

I am trying to make the text change through the buttons increment and decrement. I can't seem to find out why it does not work. Here's the code.

 <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

There are many errors in your code. See the code below.

Move the <script> to the bottom of <body> OR use DOMContentLoaded to check if the DOM is ready for manipulation.
To assign the new value to the innerHTML from array don't use quotes around it. That will assign the string to the innerHTML , instead of the actual value from the array.
Strings should be completed on the same line, the strings in the explanation array don't complete on the same line. That is syntax error. Or you can use \\ at the end of each line for multi-line strings.
You event handler functions inc() and dec() doesn't actually update the DOM , they just update a variable in the code. So, user cannot see any difference on the screen.

Demo

 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

Does this work? 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

Question

2 answers

solution1
2 2015-07-24 07:09:53

solution2
0 ACCPTED 2015-07-24 07:24:26

Change text on button click event

Question

2 answers

solution1 2 2015-07-24 07:09:53

solution2 0 ACCPTED 2015-07-24 07:24:26

solution1
2 2015-07-24 07:09:53

solution2
0 ACCPTED 2015-07-24 07:24:26