fix(demos): updated ids (#318).

Esri · Oct 10, 2019 · acad593 · acad593
1 parent 2eea875
commit acad593
Showing 1 changed file with 19 additions and 9 deletions.
diff --git a/src/demos/calcite-value-list.html b/src/demos/calcite-value-list.html
@@ -99,8 +99,18 @@ <h3>label-editing-enabled & single select</h3>
           </calcite-action>
         </calcite-value-list-item>
       </calcite-value-list>
-      <h4>No text-description</h4>
-      <calcite-value-list id="two" label-editing-enabled>
+      <script>
+          const valueList2 = document.querySelector("#two");
+          valueList2.addEventListener("calciteListSelectionChange", (event) => {
+            console.log(event.detail);
+          });
+          valueList2.addEventListener("calciteListItemChange", (event) => {
+            console.log(event.target);
+            console.log(event.detail);
+          });
+        </script>
+      <h3>No text-description</h3>
+      <calcite-value-list id="three" label-editing-enabled>
           <calcite-value-list-item
           text-label="2018 Generation Alpha Population (Born 2017 or Later)"
           value="GENALPHACY">
@@ -136,17 +146,17 @@ <h4>No text-description</h4>
           </calcite-value-list-item>
         </calcite-value-list>
       <script>
-        const valueList2 = document.querySelector("#two");
-        valueList2.addEventListener("calciteListSelectionChange", (event) => {
+        const valueList3 = document.querySelector("#three");
+        valueList3.addEventListener("calciteListSelectionChange", (event) => {
           console.log(event.detail);
         });
-        valueList2.addEventListener("calciteListItemChange", (event) => {
+        valueList3.addEventListener("calciteListItemChange", (event) => {
           console.log(event.target);
           console.log(event.detail);
         });
       </script>
       <h3>drag-enabled</h3>
-      <calcite-value-list id="three" drag-enabled>
+      <calcite-value-list id="four" drag-enabled>
         <calcite-value-list-item text-label="OBJECTID" text-description="OBJECTID" value="OBJECTID" icon="grip">
           <calcite-action slot="secondaryAction" id="action-test" label="click-me" onClick="console.log('clicked');">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
@@ -189,11 +199,11 @@ <h3>drag-enabled</h3>
         </calcite-value-list-item>
       </calcite-value-list>
       <script>
-        const valueList3 = document.querySelector("#three");
-        valueList3.addEventListener("calciteListSelectionChange", (event) => {
+        const valueList4 = document.querySelector("#four");
+        valueList4.addEventListener("calciteListSelectionChange", (event) => {
           console.log(event.detail);
         });
-        valueList3.addEventListener("calciteValueListOrderChange", (event) => {
+        valueList4.addEventListener("calciteValueListOrderChange", (event) => {
           console.log('sort order changed');
           console.log(event.detail);
         });