slick event listener

joelsholland · Aug 22, 2023 · 041f03e · 041f03e
1 parent bd291ee
commit 041f03e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 37 deletions.
diff --git a/power-automate/power-automate-expression.html b/power-automate/power-automate-expression.html
@@ -6,29 +6,29 @@
         <script src="powerAutomateExpression.js"></script>
 </head>
 
- <title>Generate a Power Automate expression</title>        
-
+<title>Generate a Power Automate expression</title>
 
-<body>
 
-<h2>Generate a Power Automate expression</h2>
+<body onload="powerAutomate()">
+
+        <h2>Generate a Power Automate expression</h2>
 
         <div class="top">
-				<div class="group1">
-                <div class="label">
-
-                <label for="t1">Action</label>
+                <div class="group1">
+                        <div class="label">
+
+                                <label for="t1">Action</label>
+                        </div>
+                        <input class="top-input" type="text" id="t1" name="t1" title="Action" />
                 </div>
-                <input class="top-input" type="text" id="t1" name="t1" title="Action" />
-				</div>
-				<div class="group2">
-                <div class="label">
-                <label for="t2">Property</label>
+                <div class="group2">
+                        <div class="label">
+                                <label for="t2">Property</label>
+                        </div>
+                        <input type="text" class="top-input" type="text" id="t2" name="t2" title="Property" />
+
                 </div>
-                <input type="text" class="top-input" type="text" id="t2" name="t2" title="Property" />
-                <button id="button1" name="button1" onclick="generatePA()">Generate</button>
-				</div>
-
+
 
         </div>
         <div class="bottom">

diff --git a/power-automate/powerAutomateExpression.js b/power-automate/powerAutomateExpression.js
@@ -1,28 +1,38 @@
-function generatePA() {
-        const action = document.getElementById('t1').value.trim().replaceAll(/\s+/g, '_');
-        const element = document.getElementById('t2').value.trim();
+function powerAutomate() {
+        const actionField = document.getElementById('t1');
+        const elementField = document.getElementById('t2');
         const response = document.getElementById('response');
-        const beforeAction = "first(body('";
-        const afterAction = "')?['value'])";
-        const beforeElement = "?['";
-        const afterElement = "']";
-
-        //clear whatever was in the output
-        response.innerHTML = ''
 
-        //create colorful span
-        actionSpan = document.createElement("span")
-        actionSpan.setAttribute("class", "actionColor")
-        actionSpan.innerText = action
+        actionField.addEventListener("input", generatePA);
+        elementField.addEventListener("input", generatePA);
 
-        response.append(beforeAction, actionSpan, afterAction);
+        function generatePA() {
+                const action = document.getElementById('t1').value.trim().replaceAll(/\s+/g, '_');
+                const element = document.getElementById('t2').value.trim();
+                const beforeAction = "first(body('";
+                const afterAction = "')?['value'])";
 
-        if (element.length > 0) {
+                //clear whatever was in the output
+                response.innerHTML = ''
 
-                elementSpan = document.createElement("span");
-                elementSpan.setAttribute("class", "elementColor");
-                elementSpan.innerText = element;
+                //create colorful span
+                actionSpan = document.createElement("span")
+                actionSpan.setAttribute("class", "actionColor")
+                actionSpan.innerText = action
 
-                response.append(beforeElement, elementSpan, afterElement);
+                //show output with only action
+                response.append(beforeAction, actionSpan, afterAction);
+
+                if (element.length > 0) {
+                        beforeElement = "?['";
+                        afterElement = "']";
+
+                        elementSpan = document.createElement("span");
+                        elementSpan.setAttribute("class", "elementColor");
+                        elementSpan.innerText = element;
+
+                        //show output with action and element
+                        response.append(beforeElement, elementSpan, afterElement);
+                }
         }
 }