2

Warning: I'm not good at JavaScript, I based the JavaScript part off of this post.

So I have a little Script that should set theDuration to an HTML element in the front window of active tab. I looked at the HTML and the Element in full is <span id="duration">00:10:00</span>. I want theDuration to be 00:10:00. I know you can set JavaScript variables to the JavaScript code below since it's mentioned in the post I based it off of, but when I try to run the code down below, it doesn't work.

tell application "Google Chrome"
    tell active tab of front window to set theDuration to execute javascript "document.getElementById('duration');"
end tell

EDIT: Now that I placed the tell active tab of front window in front of the set theDuration to..., it compiles, but theDuration is just {} instead of 00:10:00.

gurkensaas
  • 793
  • 1
  • 5
  • 29

2 Answers2

1

I think, you should request for innerHTML, and indicate the expected result type. Not tested, because I have not Google Chrome and your webpage:

tell application "Google Chrome"
  tell active tab of front window to set theDuration to (execute javascript "document.getElementById('duration').innerHTML;") as text
end tell
Robert Kniazidis
  • 1,760
  • 1
  • 7
  • 8
  • JSYK... `... as text` is not necessary and is redundant in this use case because the _class_ of the _value_ of the `theDuration` _variable_ is already _text_ whether one uses **HTMLElement.innerText** or **HTMLElement.innerHTML**, as **HTML** is already _text_ to begin with. – user3439894 Jun 15 '21 at 15:59
1

Given the following HTML snippet:

<span id="duration">00:10:00</span>

And wanting the variable theDuration to contain the value of duration when the element is id, you would query with:

tell application "Google Chrome" to ¬
    set theDuration to ¬
        execute front window's active tab javascript ¬
            "document.getElementById('duration').innerText;"

From: W3Schools

HTML DOM getElementById() Method

Definition and Usage

The getElementById() method returns the element that has the ID attribute with the specified value.

This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.

Returns null if no elements with the specified ID exists.

An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.

Syntax:

document.getElementById(elementID)

Parameter Values:

  • Parameter: elementID
  • Type: String
  • Description: Required. The ID attribute's value of the element you want to get

From: W3Schools

HTML DOM innerText Property

Definition and Usage

The innerText property sets or returns the text content of the specified node, and all its descendants.

If you set the innerText property, any child nodes are removed and replaced by a single Text node containing the specified string.

Note: This property is similar to the textContent property, however there are some differences:

  • textContent returns the text content of all elements, while innerText returns the content of all elements, except for <script> and <style> elements.
  • innerText will not return the text of elements that are hidden with CSS (textContent will).

Tip: To set or return the HTML content of an element, use the innerHTML property.


From: W3Schools

HTML DOM innerHTML Property

Definition and Usage

The innerHTML property sets or returns the HTML content (inner HTML) of an element.

Syntax

Return the innerHTML property:

HTMLElementObject.innerHTML

Set the innerHTML property:

HTMLElementObject.innerHTML = text

Property Values

  • Value: text
  • Description: Specifies the HTML content of an element

My Notes:

Since you asked for a canonical answer, I'm quoting this information from W3Schools as I find to be one of the best canonical sources that has help me when using JavaScript mixed with AppleScript.

Note that in this particular case, given the HTML snippet, that HTMLElement.innerText and HTMLElement.innerHTML will both return .e.g. 00:10:00. As both can return/set the text content of the specified node, just be aware of their differences based on your particular needs/usage, and to what specifically you are applying it to.

user3439894
  • 7,266
  • 3
  • 17
  • 28