Not able to set variable by grabbing HTML elementId

I’ve been pretty stumped on this for a few hours. I have a web page where I’m trying to iterate over the dropdown list options by first grabbing the options and putting them into a variable. For some reason, however, I’m not able to get past this step:

tell application "Safari"
	set URL of document 1 to dropdownURL
	
	delay 5
	
	-- Get the dropdown list element
	set dropdown to do JavaScript "document.getElementById('svc-downloadPdf').options;" in document 1
	
	if dropdown is equal to missing value then
		error "The variable dropdown is undefined."
	end if
end tell

Via the Dev Console, I can go to the web page and run document.getElementById('svc-downloadPdf').options; and get the expected results so I know the Javascript code to find the element by Id is correct.

image

Any thoughts on what else I can be missing?

I doubt that you can return an object to a script that way. Depending on what you want to do with the options, several approaches are possible.

If, as I suppose, you want to get at the values here, you could do something like this in your JavaScript.

JSON.stringify(Array.from(document.getElementById(...).options).map(o => o.value))

That’s a bit contrived because options is not an Array. In order to use map, you have to first convert options to an Array with the from method. Then map builds a new Array consisting of the values. Finally, JSON.stringify converts that to a string that can be returned to your script.

TL;DR
It’s quite obvious why you can’t “set a variable to the options” as you intended: the options are part of the DOM. If you could simply get at them (or any DOM element at all) from outside the browser, that would possibly endanger the browser process itself. The HTML document as the whole browser process (like all processes) is protected by the OS so that other processes can’t poke at its internals.
One could of course argue that you only want a copy of the DOM element here, not the element itself. But Applescript has no means to handle DOM elements, nor has JavaScript outside of the browser.

I can’t test the solution on a web page whose address I don’t know.
 

set JXAscript to "
function pdfLinks()    //this defines my own function 
{
theSearch = document.getElementById('svc-downloadPdf').getElementsByTagName('option');
var arr = [], thePDFs = [].slice.call(theSearch);
for(var i = 0; i < thePDFs.length; i++) {arr.push(thePDFs[i].value)}
return arr
}
pdfLinks()        // this calls the defined function 
"

tell application "Safari" to do JavaScript JXAscript in (current tab of front window)

 

Thank you both, I found this question and answer in StackOverflow which is exactly what I was looking for as it helped me understand why it hasn’t been working as expected and how to fix: