0

Hi folks I apologize if you have seen this one but after some extensive google searches I still came out empty. I want to use global JavaScript variables in my visualforce page but only local variables work. What am I missing? Thanks for helping a newbie.

Basic example:

 //Variables

 var resch = document.getElementById('resapp'); 
 var step1 = document.getElementById('firstpage');

function scheduleNow (){

  if(resch.checked)
  { 
   step1.style.display='none';
   alert("You chose to reschedule.");  
  }
Improve this question
4
  • Hi, and welcome to SFSE! There's not anything technically wrong with this code, but there may be other factors at play. I would suggest you edit your question to include more code. It may be a "race condition" (e.g. you're trying to access elements that don't exist yet), an incorrect ID value, or something else. The more code you provide, the better we can assist you. Also, if you're getting any error messages, etc, please include those in your question. Commented Apr 23, 2019 at 17:23
  • Hi Keith, thanks. I moved the function and the global variables to the bottom of the page and it all works. I am fairly new to JS. I don't want to end up with JavaScript all over the place (top/bottom/etc.) Any quick tip? Please update your answer and I would gladly mark the question as resolved. Commented Apr 23, 2019 at 18:28
  • The advised solution is to use window.addEventListener('DOMContentLoaded', function() { ... }); as this makes sure that all of the DOM elements are loaded before your code executes. Commented Apr 23, 2019 at 18:36
  • Also, PS, to notify an answerer, you need to comment on the answer. I ended up getting notified instead. Of course, I'm always willing to help when I can; I just wanted you to know. Commented Apr 23, 2019 at 18:37

2 Answers 2

Reset to default
2

I assume you don't have the closing } missing in your page.

If the Id values you are looking for are ones you have set on apex: tags, then they will have been given prefixes related to the containing elements. Name all the apex: tags and use your browser's "Inspect" feature to find the correct Id e.g.:

var resch = document.getElementById('p:f:pbs:resapp');

Or another approach is to use an "ends with" selector thought I am not sure of the syntax without an element name so this assumes input:

var resch = document. querySelector('input[id$="resapp"]');

See Best Practices for Accessing Component IDs.

Improve this answer
0

I will consider the advised solution to use "window.addEventListener('DOMContentLoaded', function() { ... });" at a later time as I could not get it to work right away. I used sfdcfox's pointer that there could be a "race condition" (e.g. you're trying to access elements that don't exist yet)" and moved all JS to the bottom of the form. While perhaps not the best solution, it is working very well with the global variables. Thanks all!

Improve this answer
2
  • Pragmatically, putting the JavaScript at the end of the page works fine. Commented Apr 23, 2019 at 20:40
  • Thanks Keith, much appreciated! Commented Apr 24, 2019 at 14:39

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.