是否可以在不移动元素的情况下更改 html 上的索引顺序？答案

【问题标题】：Is it possible to change the index order on html with out move the elements?是否可以在不移动元素的情况下更改 html 上的索引顺序？
【发布时间】：2020-12-20 21:47:22
【问题描述】：

大家好，我有一个问题，我一直在尝试更改索引的顺序（0,1,2...9）而不更改 html 上的顺序，原因是我想要我的数字的顺序，就像图像中一样.Calculator

这是html的另一个img。

<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] 所以我想分配index[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);
});

});

【问题讨论】：

你能分享你当前的 Javascript 吗？您可以在格式化后复制粘贴，而不是分享图片。
如果您要问的问题是“为什么它在 0 处发布索引？”这是一个标准的编程事情，几乎没有例外。您只需要纠正一个，或者也从 0 开始您的按钮，然后使用 css 将 0 移动到每个标准计算器布局的底部/侧面。
此外，您可以使用类似（在 PHP 中）foreach($input as $key=>$value) 之类的东西，其中 value 现在是数字，而不是索引，因此您应该能够从中算出。
@Rojo 我添加了一个 javaScript。
@Joshua 我不知道 php :(。当我点击带有数字 7 的按钮时，它返回给我索引 [1]

标签： html indexing calculator

【解决方案1】：

这样做会容易得多：

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

将inputVar 设置为一个空数组，并将每个元素设置在外部循环中。使用当前按钮的innerHTML 中的索引并将该索引设置为当前按钮。

附： let inputVar = document.querySelectorAll('.number').forEach( 不正确。 forEach 应该改为 map。

【讨论】：

当你说每个元素进入一个循环时，意思是这样的？ for(让 i = 0; i
@Erick 我为你做了一切。您可以复制并粘贴我的代码。循环是forEach，索引来自按钮的.innerHTML。
sry 但这个答案并没有像我发送的第一个那样在输入窗口中给我输出。谢谢你的帮助。 ??

【解决方案2】：

有助于在输入窗口中获得输出。

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

});

我只是使用 value 属性将值返回给输入，但它返回给我一个字符串。

【讨论】：