Using a Keyboard Maestro variable in an Execute JavaScript in Browser action

Questions & Suggestions
,
#1

Howdy folks, I have what I believe is a simple question but one I can't seem to figure out.

All I want to do is use a variable in an Execute JavaScript in Browser action, and after reading the wiki and several posts on the forum I still can't get it to work for me. No doubt I am doing something wrong but my JavaScript skills are non-existent so I figured I would reach out.

Here is the HTML code:

<div class="form-check ng-scope" ng-repeat="item in vm.dispositionOptions">
<input class="form-check-input ng-pristine ng-untouched ng-valid ng-empty" type="radio" name="Successful Call" ng-value="1" ng-model="vm.dispositionSelected" style="float:left;" value="1">
<label class="form-check-label wordwrap ng-binding" for="1">Successful Call</label>
</div>

Here is the JavaScript I have attempted:

var myVar = document.kmvar.count

(() => {
  const selectedElement = document.querySelector('input[value="myVar"]');
  if (selectedElement) {
    selectedElement.checked = true;
  }
})();

The variable itself is 0. There is a list of 10 radio buttons I want to go through and check or uncheck via their ng-value and the Keyboard Maestro variable, and I thought the most efficient way to do this would be to do something like the following screenshot shows:

Screen Shot KM 2022-06-28 21-16-26
Screen Shot KM 2022-06-28 21-16-261864×972 137 KB

But the action fails for some reason. Probably a syntax error but it has me stumped. Hoping some of the JavaScript gurus can chime in. Thanks in advance for any help!

-Chris

#2

The first thing that jumps to the eye is:

'input[value="myVar"]'

in which "myVar" looks more like a string than the bound name of a value.

Have you tried a template string between backticks, with the reference to a bound value inside ${ ... } ?

Something like:

document.querySelector(`input[value="${myVar}"]`);

Generally, you will get more informative error messages if you include the "use strict;" incantation, and it's usually better to bring the binding of names inside your IIFE (Immediately Invoked Function Expression), to avoid inter-run side effects.

(() => {
    "use strict";

    const myVar = document.kmvar.count;

   // etc etc

   
})()
#3

Sooo.... replying super late because I forgot I posted this :sweat_smile:

Most of this goes over my head but I've been reading and attempting to understand it. But I can't seem to get anything to work still. This is my latest iteration:

(() => {

	"use strict";

	const myVar = "3";

	const selectedElement = document.querySelector('input[value="${myVar}"]');
	if (selectedElement) {
	selectedElement.checked = true;
  }

})()

No doubt I am simply not understanding how it all works. Any other suggestions?

-Chris

#4

Chris,
You should use backtick(`) not single quote( ') for string interpolation just as ComplexPoint mentioned
[String Interpolation in JavaScript]

In your current iteration, you are using still using quote
`

`

const selectedElement = document.querySelector('input[value="${myVar}"]'); // '

`

`

Replace it with backtick and it should work.

const selectedElement = document.querySelector(`input[value="${myVar}"]`); // `
2 Likes
#5

See:

Template literals (Template strings) - JavaScript | MDN

Template literals are enclosed by backtick (`) characters instead of double or single quotes.

1 Like
#6

@ComplexPoint & @macdevign_mac Thank y'all so much for the help! I got it working now... apparently I didn't even notice that the string was supposed to be wrapped in a backtick... that's what I get for using such a high screen resolution :sweat_smile:

-Chris