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>

Tushar · Answer 1 · 2015-09-01T08:48:24.627

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="+" />

verjas · Accepted Answer · 2015-07-24T07:47:05.290

0

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>

edited Jul 24 '15 at 07:47

answered Jul 24 '15 at 07:24

verjas

1,793
1
15
18

Doesn't work when you click `-` button for the first time, or keep clicking on `+` button – Tushar Jul 24 '15 at 07:38
@verjas If that's the case I would like to amuse you with another question.. :P – Jul 24 '15 at 07:57
What if I had a lot of these values of text and I wouldn't want a large js file. How could I put them in an extra JSON or something like that? – Jul 24 '15 at 07:58
You can simply put the large arrays in a different js file, then include them on the top of the page (in the ): (might slow the loading of the page if it's a large file) | or you can load them only when you need them using AJAX – verjas Jul 24 '15 at 08:06
I guest the best option would be to not have them in a js file, but in a database, and load them from there... This would allow you to manage the descriptions more easily, like make changes and insertions. But this it's a different approach and you need a whole new code. :) – verjas Jul 24 '15 at 08:09
Sorry, to get JSON (instead of simple js array), you should look here: http://stackoverflow.com/questions/7346563/loading-local-json-file – verjas Jul 24 '15 at 08:12

Change text on button click event

2 Answers2