根据最高数字突出显示 div

Question

我试图突出显示 div 中的一个值，该值是数组中的最低值。

当用户完成每个输入行（设计出口和实际出口）时，调用 outletIndex() 函数计算百分比并将值推入数组。这部分我正在做。

然后我要做的是找到该数组中的最小数字并突出显示 div（比例）。我希望这是动态的，以便在用户完成每个输入行时计算百分比并逐步突出显示最低索引值。

我正在使用 querySelectorAll() 将 div class 值与最低索引值匹配，但我不确定是否需要解析 nodeList 以匹配 indexArray 的值？

我还想知道，如果在字段中输入错误并添加到索引数组中，并且它恰好是最低索引，它不会匹配 HTML 上显示的索引值，而不是调用函数。

  document.querySelector('#outlet_actual_1').addEventListener('keypress', function(e) {
     
    if (e.key === 'Enter') {
        let actual = document.getElementById("outlet_actual_1").valueAsNumber || 0;
        let design = document.getElementById("outlet_design_1").valueAsNumber || 0;
        let result1 = outletIndex(actual, design);
         if (!isNaN(result1)) {
            document.getElementById("percentage").textContent = `${result1.toFixed(1)}%`;
        }  
    }   
});
document.querySelector('#outlet_actual_2').addEventListener('keypress', function(e) {
   
    if (e.key === 'Enter') {
        let actual = document.getElementById("outlet_actual_2").valueAsNumber || 0;
        let design = document.getElementById("outlet_design_2").valueAsNumber || 0;
        let result1 = outletIndex(actual, design);
         if (!isNaN(result1)) {
            document.getElementById("percentage2").textContent = `${result1.toFixed(1)}%`;
        }  
    }   
});
document.querySelector('#outlet_actual_3').addEventListener('keypress', function(e) {
    
    if (e.key === 'Enter') {
        let actual = document.getElementById("outlet_actual_3").valueAsNumber || 0;
        let design = document.getElementById("outlet_design_3").valueAsNumber || 0;
        let result1 = outletIndex(actual, design);
         if (!isNaN(result1)) {
            document.getElementById("percentage3").textContent = `${result1.toFixed(1)}%`;
        }  
    }   
});
const indexArray = [];
function outletIndex(a, b) {    
    let result = a / b * 100;    
   if (!isNaN(result)) {
        indexArray.push(+result.toFixed(2));
        indexFindandHighlight();  
    } 
    console.log(indexArray, result);
    return result; 
}

function indexFindandHighlight(){
    const lowestIndex = Math.min(...indexArray);
    const indexCheck = document.querySelectorAll('.proportion').valueAsNumber || 0;
    console.log(lowestIndex);
    if (lowestIndex == indexCheck) {
        $(document).ready(function() {

            $("#outlet_actual_1", "#outlet_actual_2", "#outlet_actual_3").onchange(function(){
               $(".proportion").effect( "highlight", {color:"#669966"}, 3000 );
            });
         });
    } 
};

    <table>
      <tr>
        <div class="form-group row 1" id="outlets1">
          <td><label
            >Outlet Design</label>
            <input
              name = "outlet 1 design"
              class="form-control design_1"
              id="outlet_design_1"
              type="number"
              placeholder="Outlet 1 Design"
              onkeydown="outletIndex();"
            />
          </td>
          <td><label
            >Outlet Actual</label>
            <input
            name="outlet 1 actual"
              class="form-control actual_1"
              id="outlet_actual_1"
              type="number"
              placeholder="Outlet 1 Actual"
              onkeydown="outletIndex();"
            />
          </td>
          <td><label
            >Outlet Balance</label>
            <input
              name="outlet_balance"
              class="form-control"
              input value=""
              id="outlet_balance_1"
              type="text" 
              placeholder="Outlet 1 Balance"        
            />
          </td><td>
            <div class="proportion" id="percentage">

            </div>
          </td>
        </div>
      </tr>
      <tr>
      <div class="form-group row 2" id="outlets2">
        <td>
          <input
            name="outlet_design"
            class="form-control design_2"
            id="outlet_design_2"
            type="number"
            placeholder="Outlet 2 Design"
            onkeydown="outletIndex();"
          />
        </td>
        <td>
          <input
            name="outlet_actual"
            class="form-control actual_2"
            id="outlet_actual_2"
            type="number"
            placeholder="Outlet 2 Actual"
            onkeydown="outletIndex();"
          />
        </td>
        <td>
          <input
            name="outlet_balance"
            class="form-control"
            id="outlet_balance_2"
            type="number" 
            placeholder="Outlet 2 Balance"        
          />
        </td><td>
          <div class="proportion" id="percentage2">

          </div>
        </td>
      </div></tr>
        <tr>
            <div class="form-group row 3" id="outlets3">
              <td>
                <input
                  name="outlet_design"
                  class="form-control design_3"
                  id="outlet_design_3"
                  type="number"
                  placeholder="Outlet 3 Design"
                  onkeydown="outletIndex();"
                />
              </td>
              <td>
                <input
                  name="outlet_actual"
                  class="form-control actual_3"
                  id="outlet_actual_3"
                  type="number"
                  placeholder="Outlet 3 Actual"
                  onkeydown="outletIndex();"
                />
              </td>
              <td>
                <input
                  name="outlet_balance"
                  class="form-control"
                  id="outlet_balance_3"
                  type="number" 
                  placeholder="Outlet 3 Balance"        
                />
              </td><td>
                <div class="proportion" id="percentage3">
      
                </div>
              </td>
            </div></tr>
      </div>
    </table>
  </fieldset>
</form>
</div>

Answer 1

多个问题：

清理HTML
重用代码
一致性，使用jquery或javascript
将 UI 更改与数据更改分开。
一致性，使用 HTML 或 javascript 文件绑定事件侦听器。

请检查以下样本

const number = (str) => Number(str) || 0;

const bind = (id) => {
  function onBind(e) {
    let actual = number(document.querySelector(`#outlet_actual_${id}`).value);
    let design = number(document.querySelector(`#outlet_design_${id}`).value);
    let result1 = percentage(actual, design);
    if (!isNaN(result1)) {
      document.querySelector(
        `#percentage_${id}`
      ).textContent = `${result1.toFixed(1)}%`;
    }
    updateIndex(id, result1);
    highlight();
  }
  document
    .querySelector(`#outlet_actual_${id}`)
    .addEventListener("change", onBind);
  document
    .querySelector(`#outlet_design_${id}`)
    .addEventListener("change", onBind);
};

function percentage(a, b) {
  return b === 0 ? 0 : (a / b) * 100;
}
let percentages = [];
function updateIndex(id, value) {
  percentages[id - 1] = value;
}

function highlight() {
  let minIndex = -1;
  let minValue = Number.MAX_SAFE_INTEGER;
  for (let index in percentages) {
    if (percentages[index] < minValue) {
      minIndex = Number(index);
      minValue = percentages[index];
    }
  }
  if (minIndex === -1) return;

  document.querySelector(`#percentage_${minIndex + 1}`).style.color = "red";
  setTimeout(() => {
    document.querySelector(`#percentage_${minIndex + 1}`).style.color = "black";
  }, 3000);
}
bind(1);
bind(2);
bind(3);

<table>
      <tr>
        <div class="form-group row 1" id="outlets1">
          <td><label
            >Outlet Design</label>
            <input
              name = "outlet 1 design"
              class="form-control design_1"
              id="outlet_design_1"
              type="number"
              placeholder="Outlet 1 Design"
              
            />
          </td>
          <td><label
            >Outlet Actual</label>
            <input
            name="outlet 1 actual"
              class="form-control actual_1"
              id="outlet_actual_1"
              type="number"
              placeholder="Outlet 1 Actual"
              
            />
          </td>
          <td><label
            >Outlet Balance</label>
            <input
              name="outlet_balance"
              class="form-control"
              input value=""
              id="outlet_balance_1"
              type="text" 
              placeholder="Outlet 1 Balance"        
            />
          </td><td>
            <div class="proportion" id="percentage_1">

            </div>
          </td>
        </div>
      </tr>
      <tr>
      <div class="form-group row 2" id="outlets2">
        <td>
          <input
            name="outlet_design"
            class="form-control design_2"
            id="outlet_design_2"
            type="number"
            placeholder="Outlet 2 Design"
          />
        </td>
        <td>
          <input
            name="outlet_actual"
            class="form-control actual_2"
            id="outlet_actual_2"
            type="number"
            placeholder="Outlet 2 Actual"
            
          />
        </td>
        <td>
          <input
            name="outlet_balance"
            class="form-control"
            id="outlet_balance_2"
            type="number" 
            placeholder="Outlet 2 Balance"        
          />
        </td><td>
          <div class="proportion" id="percentage_2">

          </div>
        </td>
      </div></tr>
        <tr>
            <div class="form-group row 3" id="outlets3">
              <td>
                <input
                  name="outlet_design"
                  class="form-control design_3"
                  id="outlet_design_3"
                  type="number"
                  placeholder="Outlet 3 Design"
                  
                />
              </td>
              <td>
                <input
                  name="outlet_actual"
                  class="form-control actual_3"
                  id="outlet_actual_3"
                  type="number"
                  placeholder="Outlet 3 Actual"
                  
                />
              </td>
              <td>
                <input
                  name="outlet_balance"
                  class="form-control"
                  id="outlet_balance_3"
                  type="number" 
                  placeholder="Outlet 3 Balance"        
                />
              </td><td>
                <div class="proportion" id="percentage_3">
      
                </div>
              </td>
            </div></tr>
      </div>
    </table>
  </fieldset>
</form>
</div>

根据最高数字突出显示 div

Highlight div based on highest number

html

javascript

arrays

jquery

highlight