Можно ли изменить порядок индексов в html без перемещения элементов?

#html #indexing #calculator

#HTML #индексирование #калькулятор

Вопрос:

Привет всем, у меня проблема, я пытался изменить порядок индекса (0,1,2 … 9) без изменения порядка в html. причина в том, что я хочу, чтобы порядок моего номера был таким, как на изображении.Калькулятор

Это еще один img html.

 <div class="calculator-grid">
<!-- Calculator display  -->
<input type="number">

<!-- Numbers and operator classes -->
<button class="span-two ac-color">AC</button>
<button class="clear-entry">CE</button>
<button class="divideOperator">÷</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="multiplyOperator">*</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="addOperator"> </button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="subtractOperator">-</button>
<button class="number-dot definers">.</button>
<button class="number">0</button>
<button class="span-two definers">=</button>

Итак, я не хочу менять порядок чисел в калькуляторе, как на изображении, я хочу изменить порядок индексов, например, html дает мне номер 7 с индексом [0], поэтому я хочу присвоить индексу [7] номер 7. Могу ли я это сделать?

 const input = document.querySelector('input');
let inputVar = document.querySelectorAll('.number').forEach(function 
(button, index) {
button.addEventListener('click', function () {
  input.value  = index   1;
  console.log(inputVar);
});

});

1. Не могли бы вы поделиться своим текущим Javascript? Вы можете скопировать и вставить его после форматирования вместо обмена изображениями.

2. если вы задаете вопрос: «Почему он публикуется с индексом 0?» это стандартная программная вещь, за редкими исключениями. Вам просто нужно исправить на единицу или также запустить кнопки с 0 и использовать css для перемещения 0 в нижнюю / боковую часть для стандартного макета калькулятора.

3. кроме того, вы могли бы использовать что-то вроде (в PHP) foreach($input as $key=>$value) , где значение теперь является числом, а не индексом, поэтому вы должны иметь возможность вычислять это.

4. @Rojo Я добавляю JavaScript.

5. @Joshua Я не знаю php:(. Когда я нажал на кнопку с номером 7, она вернула мне индекс [1]

Ответ №1:

Было бы намного проще сделать это так:

 let inputVar = [];
document.querySelectorAll('.number').forEach(function(button) {
  inputVar[button.innerHTML] = button;
});

Установите inputVar значение в пустой массив и установите каждый элемент в цикле снаружи. Используйте индексы из текущей кнопки innerHTML и установите этот индекс для текущей кнопки.

PS let inputVar = document.querySelectorAll('.number').forEach( неверно. forEach вместо этого должно быть map .

1. когда вы говорите, что каждый элемент в цикле, подразумевается что-то вроде этого? для (пусть i = 0; i < InputVar.length; i ) {InputVar[i]; } и как я могу установить индексы из текущей кнопки?

2. @Erick Я все сделал для тебя. Вы можете просто скопировать и вставить мой код. Цикл forEach — это, а индексы — от кнопок. .innerHTML

3. sry но этот ответ не дает мне выходных данных в окне ввода, как первый, который я отправил. Спасибо за вашу помощь. 🙏🏼

Ответ №2:

Это помогает получить вывод в окне ввода.

 numberNine.addEventListener('click', function() {
numberNine = Number('9');
input.value = input.value   numberNine;
console.log(numberNine);

});

Я просто использую свойство value для возврата значения на вход, но оно возвращает мне строку.