Блог

Главная - Вопросы по программированию - Выделите div на основе наибольшего числа

Выделите div на основе наибольшего числа

#javascript #html #jquery #arrays #highlight

Вопрос:

Я пытаюсь выделить значение в div, которое является наименьшим значением в массиве.

Когда пользователь заполняет каждую входную строку (проектная розетка и фактическая розетка) , вызывается функция outletIndex (), которая вычисляет процент и помещает значение в массив. Над этой частью я работаю.

Затем я пытаюсь найти наименьшее число в этом массиве и выделить div (пропорцию). Я хочу, чтобы это было динамично, чтобы по мере того, как пользователь заполняет каждую входную строку, вычислялся процент и постепенно подсвечивалось наименьшее значение индекса.

Я использую querySelectorAll (), чтобы сопоставить значение класса div с наименьшим значением индекса, но я не уверен, нужно ли мне анализировать список узлов, чтобы он соответствовал значению 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 resu< 
}

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>

Ответ №1:

Множество проблем:

  1. Очистка HTML
  2. Повторное использование кода
  3. Согласованность, используйте либо jquery, либо javascript
  4. Отделите изменения пользовательского интерфейса от изменения данных.
  5. Согласованность, привязка прослушивателя событий с помощью файла 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>

Комментарии:

1. Я согласен, что надеялся использовать только vanilla JS, так как я все еще учусь писать JS и HTML. Спасибо за вашу помощь. Код работает так, как я хотел, я не ожидал, что кто-нибудь напишет его за меня… Я также не думал, что я был так далек от лол, но, очевидно, я был.

Метки: