Show/hide itemCount input in demo conditionally

Depending on the value of multilineLists config

Author: nene

static/index.html

@@ -92,17 +92,16 @@ <h3 style="margin: 0.5rem 0">Options</h3>
               <option value="always">Always</option>
               <option value="avoid">Avoid</option>
               <option value="expressionWidth">Expression width</option>
+              <option value="itemCount">Item count</option>
             </select>
-          </article>
-          <article class="config">
-            <label for="multilineLists.itemCount">Newline item count:</label>
             <input
               type="number"
-              id="multilineLists.itemCount"
-              name="multilineLists.itemCount"
-              min="0"
+              id="multilineLists-itemCount"
+              name="multilineLists-itemCount"
+              min="1"
               max="100"
-              value="0"
+              value="1"
+              style="display: none"
             />
           </article>
           <article class="config">

static/index.js

@@ -9,7 +9,7 @@ const attachFormat = () => {
   const logicalOperatorNewline = document.getElementById('logicalOperatorNewline');
   const aliasAs = document.getElementById('aliasAs');
   const multilineLists = document.getElementById('multilineLists');
-  const itemCount = document.getElementById('multilineLists.itemCount');
+  const itemCount = document.getElementById('multilineLists-itemCount');
   const tabulateAlias = document.getElementById('tabulateAlias');
   const commaPosition = document.getElementById('commaPosition');
   const newlineBeforeOpenParen = document.getElementById('newlineBeforeOpenParen');
@@ -20,6 +20,12 @@ const attachFormat = () => {
   const newlineBeforeSemicolon = document.getElementById('newlineBeforeSemicolon');
 
   function format() {
+    if (multilineLists.options[multilineLists.selectedIndex].value === 'itemCount') {
+      itemCount.style.display = 'inline';
+    } else {
+      itemCount.style.display = 'none';
+    }
+
     try {
       const config = {
         language: language.options[language.selectedIndex].value,
@@ -31,7 +37,7 @@ const attachFormat = () => {
           logicalOperatorNewline.options[logicalOperatorNewline.selectedIndex].value,
         aliasAs: aliasAs.options[aliasAs.selectedIndex].value,
         multilineLists:
-          itemCount.value > 0
+          multilineLists.options[multilineLists.selectedIndex].value === 'itemCount'
             ? itemCount.value
             : multilineLists.options[multilineLists.selectedIndex].value,
         tabulateAlias: tabulateAlias.checked,