function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Mahu SimsMahu Sims 

Can the function occur before the button click?

Hi!

I am creating a custom detail page button that needs to change color based on the data from our custom field. This is an onClick js button. 
The problem I am having is that the button does not change color until after the button is clicked, while i want this to occur as soon as the page is loaded.

Here is what I have so far:
{!REQUIRESCRIPT("/soap/ajax/20.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/20.0/apex.js")} 


var growth = '{!Contact.Orders_Growth_YOY_Change_User__c}'; 


(function() {
if(growth == ''){
var button = document.getElementsByName('check_contact_health')[0];
  button.style.background = 'url("http://www.dcfanboy.com/media/catalog/product/cache/1/image/265x265/17f82f742ffe127f42dca9de82fb58b1/s/m/smoke_gray.jpg)';
}());

alert("This contact has not begin to bill with Mimeo yet. There will be no growth data until contact has billed for at least 12 months");
}
else if(growth >=1){
(function() {
var button = document.getElementsByName('check_contact_health')[0];
  button.style.background = 'url("http://upload.wikimedia.org/wikipedia/commons/d/de/Color-Green.JPG")';
}());

alert("This contact's orders are currently growing. This contact's year over year order growth is equal to '{!Contact.Orders_Growth_YOY_Change_User__c}'");
}
else if(growth ==0){
(function() {
var button = document.getElementsByName('check_contact_health')[0];
  button.style.background = 'url("http://upload.wikimedia.org/wikipedia/commons/d/d0/Color-yellow.JPG")';
}());

alert("This contact's orders are currently the same as they were in the previous 12 months. This contact's year over year order growth is equal to '{!Contact.Orders_Growth_YOY_Change_User__c}'");
}

else{
(function() {
var button = document.getElementsByName('check_contact_health')[0];
  button.style.background = 'url("http://www.colorcombos.com/images/colors/FF0000.png")';
}());

alert("This contact is currently at risk as the contact is ordering less than they did in the previous 12 months. This contact's year over year order growth is equal to '{!Contact.Orders_Growth_YOY_Change_User__c}'");
}

Thanks in advance for your help!
bob_buzzardbob_buzzard
Do you see any JavaScript errors in the page?  What does this line:

var growth = '{!Contact.Orders_Growth_YOY_Change_User__c}';

look like when the page is rendered?  If you are starting out with an empty contact then this will be a blank string. 
Mahu SimsMahu Sims
If the string is blank the color of the button is gray, but the problem is that the button only turns gray after i click the button. I want the button to be gray as soon as the page is loaded.
Mahu SimsMahu Sims
earlier i used a base 64 encoder to turn my function into this code:
{!REQUIRESCRIPT("data:application/javascript;base64, KGZ1bmN0aW9uKCkgewp2YXIgYnV0dG9uID0gZG9jdW1lbnQuZ2V0RWxlbWVudHNCeU5hbWUoJ2NoZWNrX2NvbnRhY3RfaGVhbHRoJylbMF07CiAgYnV0dG9uLnN0eWxlLmJhY2tncm91bmQgPSAndXJsKCJodHRwOi8vdXBsb2FkLndpa2ltZWRpYS5vcmcvd2lraXBlZGlhL2NvbW1vbnMvZC9kMC9Db2xvci15ZWxsb3cuSlBHIiknOwp9KCkpOw==")}
This turned my button yellow as soon as the page loaded however, i am not sure how to use this with the if/else statements to set conditions so that the button will change color based on the conditions.
bob_buzzardbob_buzzard
This sounds like the JavaScript only executes when the button is clicked - does clicking the button force a page reload or similar?
Mahu SimsMahu Sims
Clicking the button produces an alert. I want the js to execute before the button is clicked though. Is there any way to do that?
bob_buzzardbob_buzzard
There is, but much depends on why it isn't doing anything at present.  The JavaScript should execute as soon as it is encountered - is it at the top of the page?  It may be that the elements don't exist when it executes.