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('<p>');
    document.write(unescapeHtml(js_comment[number]));
  document.write('</p>');
  document.write('<p>');
    document.write(unescapeHtml(js_name[number]));
  document.write('</p>');
}

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/

I am working on it and I am trying to find an alternative to document.write — kingcobra1986
– kingcobra1986, Commented Sep 1, 2014 at 4:52

Community · Accepted Answer · 2017-05-23 12:09:49Z

1

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

<p id="comment"></p>
<h3 id="name"></h3>

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.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Sep 1, 2014 at 5:56

user13500

3,8642 gold badges29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kingcobra1986 Over a year ago

Thank you, after using you advise I came up this: www.jsfiddle.net/xuxcwcsd/5/ I found it easier to contain both into a group instead of doing them individually.

user13500 Over a year ago

@RyanJantzen: Great. Here is another example if you want to build upon. Should be simple to re-write if you need two tickers on same page etc. (Only as an example) jsfiddle.net/kimiliini/fsvLwbxe

user13500 Over a year ago

@RyanJantzen: PS. Add http:// in front of your URL's to automagically make them links here in comments.

user13500 Over a year ago

@RyanJantzen: As an example of re-usability and possibility of multiple on same page: jsfiddle.net/kimiliini/1gnzaz9c

kingcobra1986 Over a year ago

This is Ryan still, thank you again for the help and advice. I am currently attending college for computer science, and I am just now starting to get into object oriented programming. I've learned some on my own but I am excited to get more knowledge on it.

|

kingcobra1986 · Accepted Answer · 2014-09-01 10:51:24Z

1

Here's what I got http://jsfiddle.net/xuxcwcsd/5/: HTML -

<div id="container">
<h1>Testimonials</h1>
<div id="comment"></div>
</div>

CSS -

#container {
    border: 2px solid blue;
    padding: 3px 10px;
    margin-bottom: 20px;
}
h1 {
    color: red;
}
p {
    text-align: center;
    margin-left: 20px;
}
h3 {
    color: blue;
    text-align: right;
    margin-right: 40px;
}

JavaScript -

//create and fill the array
var commt = [ ];
var name = [ ];
var i = 0;

commt[0] = 'comment 1';
commt[1] = 'comment 2';
commt[2] = 'comment 3';
commt[3] = 'comment 4';
name[0] = 'name 1';
name[1] = 'name 2';
name[2] = 'name 3';
name[3] = 'name 4';

//shows how many comments there are
var maxComments = 4;

//get empty elements
var comment = document.getElementById('comment');

//this section will create the inital comment shown
//creates a random number 
var number = Math.floor(Math.random() * 4);

//adds the HTML to div with window.onload
window.onload = comment.innerHTML = "<p>" + commt[number] + "</p>" +
    "<h3 class='commentSliderH3'>" + name[number] + "</h3>";

//This rotates the comments
setInterval(function () { //same content as above
    var number = Math.floor(Math.random() * maxComments);

    comment.innerHTML = "<p>" + commt[number] + "</p>" +
            "<h3 class='commentSliderH3'>" + name[number] + "</h3>";
}, 1931); // Runs the function every 9031ms

answered Sep 1, 2014 at 10:51

kingcobra1986

9713 gold badges17 silver badges43 bronze badges

2 Comments

user13500 Over a year ago

PS. You have a typo in ms. (1931 vs 9031) But guess you have seen that in the "live" code.

kingcobra1986 Over a year ago

This is Ryan still, I just changed my display name. I have it set for 9031 in the real page, but for practice I had it set to 1931.

Collectives™ on Stack Overflow

pure javascript text slider that changes display of text from php

2 Answers 2

Short update:

Variable scope:

Write short concise functions:

Use strict mode:

Use code analysis tools:

Design patterns:

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Short update:

Variable scope:

Write short concise functions:

Use strict mode:

Use code analysis tools:

Design patterns:

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related