pure javascript text slider that changes display of text from php

Question

I am working on a project that has a testimony slideshow for my website. I am using php and mysql for the database. I want to use pure javascript to display the name and comment from the database. I already have the names and comments pulled from the database and stored into a javascript array. I have made it so the text displays by using setInterval and rand() to change the variable, but it does not rotate to the next image.This is my script right now.

function showComment(number) {
  document.write('');
    document.write(unescapeHtml(js_comment[number]));
  document.write('');
  document.write('');
    document.write(unescapeHtml(js_name[number]));
  document.write('');
}

setInterval(showComment(Math.floor(Math.random()*num_results), 2431);

js_comment[] and js_name[] are the variables with the name and comment from php num_results is the number of comments

jsfiddle for it so far jsfiddle.net/4nq2c0xb/

user13500 · Accepted Answer

You would likely want to use a container and textContent / innerText, e.g.:

And then first get the elements:

var comment = document.getElementById('comment');
var name = document.getElementById('name');

And in the interval function:

comment.textContent = js_comment[number];
name.textContent = js_name[number];

https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent#Browser_compatibility

http://clubajax.org/plain-text-vs-innertext-vs-textcontent/

Short update:

Not directly related to question, but some thoughts in regard to comments etc. I also register you might be in a beginner phase where basic concepts might be more important; but add it anyhow.

Note that when you have some code of some size you can also use

Code Review SE

to get input on your code. Hints and help on good and bad, how to refactor etc.

Variable scope:

If new to JavaScript this might be a bit out of scope of how your compendium are set up and where you are, but mention it as it is a rather important topic.

The first thing of concern when looking at your code is variable scope. To put it short: avoid global variables. That is variables that are accessible and modifiable from anywhere. This is highly frowned upon when it comes to production code. In short: It quickly becomes a nightmare to keep track of variables in global scope. It is prone for very ugly bugs etc. Maintaining such code, not the least for others, or your self after say 6 months, a year or what ever, also quickly makes it hard to read and so on.

How to avoid global variables in JavaScript?

In this regard there is also the need to always define variables. Not that you have not done it, but still. Personally I usually define variables in top of functions (quite a few people disagree with this, but my pref.). This way I know what variables are used, it is quick to control that it has been defined, it is a good place for a overview with comments etc.

What is the scope of variables in JavaScript?

All to note. It is important to know where variables exists. E.g. changing a global variable affects it in all functions using that variable.

Write short concise functions:

I follow the rule of thumb: “let a function do one thing, and do it well.” If a function do too much it often gets hard to maintain, it is prone for bugs, the re-usability is quickly gone etc.

Of course, sometimes I stray from this, especially if it is short example code or some quick and dirty temporary solution, testing some concept or the like; but, I have more then once also regretted this by having to use lot of time refactoring the code afterwards.

It is at least something to keep in mind.

Keep functions short.
Be very careful not to have deep nesting etc., bad:
```
if () {
    if () {
        for () {
        ...
```

Use strict mode:

What does “use strict” do in JavaScript, and what is the reasoning behind it?

Wrap your code in a strict scope:

(function(){
  "use strict";

  function foo() {

  }
  function bar() {

  }
})();

Some of the advantages are described in linked answer.

Use code analysis tools:

Should I use JSLint or JSHint JavaScript validation?

This can be somewhat too much for some newcomers as it seems all the code is bad all the time ;). It takes some experience to get used to and if one do not know the language well, it can, I guess, often be hard to understand why some things are considered bad. But; it is a good way of developing good habits. Personally I have it incorporated into my editor of choice, Vim, and as such every time I save, which I do often, I get feedback from the tool on things I might have overlooked etc. One have the possibility to tweak it. There are some of the hints it gives that I disagree with – but it is all over a good way of checking your code.

As a start, if you want to test it, you can copy paste your code into online tools:

to get a feel of how it works.

Design patterns:

This might be somewhat overwhelming, as there are so many ways (and opinions), but skimming the information and getting a feel on it might be good.

Yes, OO programming is powerful, but as a personal opinion I try not to force JS to be like Java and the like – simulate Classes etc. JS has it's own possibilities, features etc. and when projects get some size the question comes down to design patterns. Sometimes one will encounter an existing code base where one use Class like approach, and then one usually does not have any choice.

You might find this useful. If you do not read it word for word you might find it clarify some of the concept of it:

JavaScript Programming Patterns – Though I strongly disagree with the authors depiction of The Old-School Way; at least in my experience both namespace, re-usability etc. was a concern back then as well. Not for everyone, but not that dark as described.
Learning JavaScript Design Patterns – Might be somewhat big, but still.
Etc. Search the web for “JavaScript design patterns” and the like.