# one javascript doesn't function the same on two different pages **URL:** \ **Category:** Javascript & Ajax\ **Created:** [December 14, 2014, 1:31pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780 "2014-12-14T13:31:45Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![jeffrey1586](https://www.phphelp.com/letter_avatar_proxy/v4/letter/j/a183cd/32.png) [@jeffrey1586](https://www.phphelp.com/u/jeffrey1586)\ **Post date:** [December 14, 2014, 1:31pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/1 "2014-12-14T13:31:45Z")
I have multiple pages with a list of products. Customers can specify the contents using checkboxes. At the end there’s a “reset” button to restore all products back to normal. The script is called on top of every page using: [php][/php] This is the way an option is put on both product pages: [php] Kinderactiviteiten (t/m 16) [/php] This is the way the reset checkbox is put on both product pages: [php] Alles resetten! [/php] Now, on the document holdig the script, this is the build-up for every option. [php]function fadeKinderen(btn) { document.getElementById(‘checkboxKinder’).style.color = “#454938”; //this changes the text color so the user knows it can’t be used anymore document.getElementById(‘btnFadeKinderen’).style.visibility = “hidden”; //this hides the checkbox so it can’t be clicked again document.getElementById(‘btnFadeRESET’).checked = false; //this unchecks the checkbox that is clicked. $("#divFadeBVG").fadeOut(); //this is a product being removed from the product page }[/php] this is the build-up of the reset function: [php]function fadeRESET(btn) { //put back all products $("#divFadeBLO").fadeIn(); ``` //make all checkboxes visible again document.getElementById('btnFadeKinderen').style.visibility = "visible"; //set all checkboxes checked document.getElementById('btnFadeKinderen').checked = "checked"; //change the text color back to it's original color. document.getElementById('checkboxKinder').style.color = "#DAEB98"; ``` }[/php] On my index page everything works as it should. But I have more pages using this exact same code. On those pages it doesn’t work the way I want it to. It does remove all products, but some text colors don’t restore to its original color, some checkboxes do reappear but unchecked instead of checked. How is this possible? I’ve copied the checkboxes from the index page, the script is called exactly the same way as on the index page. So basicly, I have multiple pages calling just one external script. Is this the problem? Do I need to change the ID names for the other pages? Because the mark-up can be exactly the same, because the same products are displayed. ---
**Author:** ![ErnieAlex](https://www.phphelp.com/letter_avatar_proxy/v4/letter/e/bc8723/32.png) [@ErnieAlex](https://www.phphelp.com/u/ErnieAlex)\ **Post date:** [December 16, 2014, 7:59pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/2 "2014-12-16T19:59:05Z")
After quick review of the code you posted, nothing jumped out as bad. It all appears correct. You should be able to use the same code on different pages without an issue. Without seeing full copies of both pages, I will take a wild guess that you have an issue in the way that the pages have declared the JS or JQuery libraries. Therefore, you should first verify that all of your header tags are the same in both of the pages. Check starting at all the way down to tags and make sure that each code is the same on each of the pages. You may find that you declare a library from a different source. One small issue is that you are attempting to change the COLOR of a font tag. I have seen odd things that have happened when trying to set the color into a font tag. You might have to wrap the font int a tag and alter the tag’s color instead. CSS might be fighting with the JS… Now, to debug this, I found that you can use the returned value of the color call to see if it worked or not. In this way, you can debug which area of the code it is failing at. To do that, just add in an alert at your color-change code to display the results and compare. This will help you find the failure points. So, this line: document.getElementById(‘checkboxKinder’).style.color = “#454938”; Would become something like: color\_results=document.getElementById(‘checkboxKinder’).style.color = “#454938”; alert(“Current color is:”+color\_results+" Should be #454938"); Just quickly off my mind… Not tested… Anyway, it should show you the correct value and what it actually is currently. In this way you can see where it is causing the error. Unless you already know the exact line. Now, another issue is the REAL underlying code. If there is an error in the HTML or CSS this can also cause and issue with colors. To check that out, you should bring up both pages on the screen and VIEW-SOURCE of each. Compare both copies to see what is different between them. You might find a missing or a missing quote or something that would cause the colors to be incorrect. Lastly, you might want to pass both pages thru the WWW validator to see what it says for errors. Theoretically, they should have the same list of validation errors. Worth a peek, I think… The validator is here: [http://validator.w3.org/](http://validator.w3.org/) The JS code to set the color in the style area is considered as level CSS1. This means that it should work on all browsers and therefore, the user’s browser is not an issue. (By the way, did you test this issue on different browsers? I mean IE, Chrome and Firefox? Perhaps it is one browser failing?) Well, lots of info without a solution. Sorry for that, but, hopefully something here helps you sort it out. Good luck! ---
**Author:** ![jeffrey1586](https://www.phphelp.com/letter_avatar_proxy/v4/letter/j/a183cd/32.png) [@jeffrey1586](https://www.phphelp.com/u/jeffrey1586)\ **Post date:** [December 16, 2014, 11:23pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/3 "2014-12-16T23:23:35Z")
If I compare the headers, both are the same. If I compare the input types and text, all the same. If I visit the page that isn’t working correctly and click VIEW SOURCE, than click to VIEW SOURCE of the JS, I get to see the new js, with the alert function you gave me. But, if I close those windows and press the checkbox with the RESET function, no alert is given. If I go to my index page, which holds the same structure, and press the RESET checkbox, the alert is given. So somehow, the problem is on the second page. I tried to refresh etc, no differences. I’ll dive into the second one, the one that isn’t functioning as it should, I’ll keep you updated… ---
**Author:** ![ErnieAlex](https://www.phphelp.com/letter_avatar_proxy/v4/letter/e/bc8723/32.png) [@ErnieAlex](https://www.phphelp.com/u/ErnieAlex)\ **Post date:** [December 17, 2014, 12:49am UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/4 "2014-12-17T00:49:35Z")
Jeffery, well, that is actually good news, I think. We narrowed it down to something different on the two pages and most likely the JS on the second page. So, the debugging of it could be an issue with a broken HTML section that is not allowing the JS to actually be triggered. I would pass BOTH of the pages thru the validator link and see if they have the same number of errors and messages. Perhaps it might show some odd error on the second page that is hiding from you. Good luck… Let us know how it goes! ---
**Author:** ![jeffrey1586](https://www.phphelp.com/letter_avatar_proxy/v4/letter/j/a183cd/32.png) [@jeffrey1586](https://www.phphelp.com/u/jeffrey1586)\ **Post date:** [December 17, 2014, 10:17am UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/5 "2014-12-17T10:17:33Z")
The validator and I, we don’t quite get along together. If I copy the code I get a bunch of errors which doesn’t look like errors at all. Take a look at the screenshot in the attachments, this is an error that appears many many times. It sais that the \> is not placed well. This is the closing tag, I mean, without it the whole code stops working. I checked some lines, there aren’t any spaces between characters, so I don’t understand why this is given as an error. This way I cannot compare the code’s. The smallest page returns in 189 errors and 3 warnings! ??? * * * ![Untitled-8.jpg](https://www.phphelp.com/uploads/default/original/2X/5/551b1889054b20c0701104e938eab8402c64b8a3.jpg) ---
**Author:** ![Redscouse](https://www.phphelp.com/user_avatar/www.phphelp.com/redscouse/32/124_2.png) [@Redscouse](https://www.phphelp.com/u/Redscouse)\ **Post date:** [December 17, 2014, 11:36am UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/6 "2014-12-17T11:36:40Z")
Delete the stuff that’s circled in blue. Fix the spaces circled in red using %20 Add alt=“” tags to your images. Red 😉 * * * ![a.JPG](https://www.phphelp.com/uploads/default/original/2X/f/f6ede929be05ed22565e903e0c65aa8ad2557d0f.JPG) ---
**Author:** ![ErnieAlex](https://www.phphelp.com/letter_avatar_proxy/v4/letter/e/bc8723/32.png) [@ErnieAlex](https://www.phphelp.com/u/ErnieAlex)\ **Post date:** [December 17, 2014, 2:35pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/7 "2014-12-17T14:35:44Z")
Well, first, Redscouse is correct. To explain a little further so you understand it clearly. Normally, when you use images or links to files, you do not use spaces in file names. Some programmers do, but, it is considered “bad form” to use them. If you need to have a space in a file name, it is usually suggested to use an underscore instead. " \_ " So, the validator site looks for these “badly formed” file names. Replacing the space in your server-side code with the characters of %20 which is the hex space works. And, it is standard programming practice to have some sort of alternate text for all images. So, adding in the alt=“some text” is standard practice for all of your images. To save time for now, you can just use alt=" " so that the alternate text is empty. It is supposed to be for use when a user hovers over your image, they will see the name of it or some sort of extra information about the image. Now back to your errors, the object of running the two pages thru the validator was to see if both of the pages returned the same errors. So, ignoring the spaces and ALT’s, what are the other errors? The other errors would be the ones you need to look at. The part of bad “\>” not placed well could be the one error that is throwing off the entire page and making the JS invisible to the page. At one point, I suggested viewing the source of both pages once it is rendered out to the browser and compare them to see what the differences were. I am sure somewhere in these, you will find the one small difference that makes the JS code broken. The JS code is most likely there, but, somewhere the HTML is not letting it get to it. And, by the way, if this is a real site for others to visit and use, you really want it to be fully well formed and holding to world-wide standards. That is what the validator page is for. To standardize all of your code. 189 errors is not a big deal as most are just the missing ALT’s and spaces inside file names. Easy to fix these. I found 480 on one page I was helping someone with once. All except 3 of them took only 15 minutes to fix. Well worth the time! ---
**Author:** ![jeffrey1586](https://www.phphelp.com/letter_avatar_proxy/v4/letter/j/a183cd/32.png) [@jeffrey1586](https://www.phphelp.com/u/jeffrey1586)\ **Post date:** [December 17, 2014, 4:47pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/8 "2014-12-17T16:47:07Z")
I’ve checked all of the problems, they’re all about small things, nothing helped with the problem… I cannot get any further in comparing both pages. On the second page, the one with the problem, it does fade out the products when one of the checkboxes’ clicked, it does change the font color, it does hide the checkbox. When I press the reset checkbox, it does make the checkbox visible, it does NOT check this checkbox, it does NOT change the font color, it does fade in all products. ---
**Author:** ![Redscouse](https://www.phphelp.com/user_avatar/www.phphelp.com/redscouse/32/124_2.png) [@Redscouse](https://www.phphelp.com/u/Redscouse)\ **Post date:** [December 17, 2014, 5:29pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/9 "2014-12-17T17:29:59Z")
> [@ErnieAlex](#): > > To save time for now, you can just use alt=" " so that the alternate text is empty. > It is supposed to be for use when a user hovers over your image, they will see the name of it or some > sort of extra information about the image. Not quite my young padowan. The alt tags are used for hovering this is true. However, the reason they exist is for people who are using text based browsers, blind people with speech turned on etc. etc. Red 😉 ---
**Author:** ![ErnieAlex](https://www.phphelp.com/letter_avatar_proxy/v4/letter/e/bc8723/32.png) [@ErnieAlex](https://www.phphelp.com/u/ErnieAlex)\ **Post date:** [December 17, 2014, 6:23pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/10 "2014-12-17T18:23:35Z")
Redscouse! Thanks, again! Yes, I forgot about that. Been so very long since anyone mentioned text browsers and the blind-readers… Thanks for the reminder! You are good! Karma time! And, Jeffery, try making it visible AFTER you set the color and check… I have seen on one or two occasions where the order was the problem. Basically, it was some sort of refresh issue. The JS would work, but, the display would not refresh for a bit. Might work… ---
**Author:** ![jeffrey1586](https://www.phphelp.com/letter_avatar_proxy/v4/letter/j/a183cd/32.png) [@jeffrey1586](https://www.phphelp.com/u/jeffrey1586)\ **Post date:** [December 18, 2014, 10:54am UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/11 "2014-12-18T10:54:40Z")
So, I build the whole page from scratch again. Piece by piece is still the best way to find a problem… This way I found out that everything was correct, except one little thing I didn’t know. The mainpage has like 10 options to specify the products, the second page has only 6 of them. Both were communicating with the same javascript-document. The reason why the second page didn’t work correctly, is because the reset-function is looking to reset checkboxes that don’t exist on this second page. Apparently it isn’t a problem if not all the products are there, this works without any problem, but with the checkboxes this is a problem. So I solved the problem by creating a copy of the original JS-document and removing the functions that refer to checkboxes that aren’t loaded on the second page. Done! I really do appreciate all the time and effort you took to help and explain everything regarding my problem here! Thank you for this! ---
**Author:** ![ErnieAlex](https://www.phphelp.com/letter_avatar_proxy/v4/letter/e/bc8723/32.png) [@ErnieAlex](https://www.phphelp.com/u/ErnieAlex)\ **Post date:** [December 18, 2014, 4:47pm UTC](https://www.phphelp.com/t/one-javascript-doesnt-function-the-same-on-two-different-pages/23780/12 "2014-12-18T16:47:01Z")
Jeffery, glad to hear you solved it. I am sorry we did not catch that issue earlier on… Always a nice warm fuzzy feeling when you solve an issue ! LOL Good for you!