Надо, чтобы при вводе одинаковых элементов, индекс следующего возрастал по мере увеличения их количества

Question

Уже день третий сижу и думаю, как бы это сделать...

let ids = new Array("one_elem", "two_elem", "three_elem", "four_elem", "five_elem", "six_elem");
let more_ids = new Array("formula");
let ids_numb = 0;

function idNumbAdd() {
  ids_numb = ids_numb + 1;
}

let element;

function WriteElement(element) {
  if (ids_numb <= 4) {
    document.getElementById(ids[ids_numb]).innerHTML = element;
  }
}

let index = 1;

function CheckMoreIndex() {

}

function CheckForm() {
  if (ids_numb == 2) {
    let dble_form = document.getElementById(ids[0]).innerHTML + document.getElementById(ids[1]).innerHTML;
    switch (dble_form) {
      case "H2":
        document.getElementById(more_ids[0]).innerHTML = "Водород";
        break;
      case "Li2":
        document.getElementById(more_ids[0]).innerHTML = "Дилитий";
        break;
    }
  }
}

function Reset() {
  ids_numb = 0;
  index = 1;
  document.getElementById(more_ids[0]).innerHTML = null;
  for (let i = 4; i >= 0; i--) {
    document.getElementById(ids[i]).innerHTML = null;
  }
}

<div class="container">
  <table class="keyboard-and-field">
    <tbody>
      <tr>
        <td>
          <div class="keyboard-elements">
            <table class="keyboard-table" border="0">
              <tbody>
                <tr class="keys-elements">
                  <td>
                    <div align="center" id="element" onclick="WriteElement('H'); CheckMoreIndex(); idNumbAdd();  CheckForm()">H</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('He'); CheckMoreIndex(); idNumbAdd(); CheckForm()">He</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('Li'); CheckMoreIndex(); idNumbAdd(); CheckForm()">Li</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('Be'); CheckMoreIndex(); idNumbAdd(); CheckForm()">Be</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('B'); CheckMoreIndex(); idNumbAdd(); CheckForm()">B</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('C'); CheckMoreIndex(); idNumbAdd(); CheckForm()">C</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('N'); CheckMoreIndex(); idNumbAdd(); CheckForm()">N</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('O'); CheckMoreIndex(); idNumbAdd(); CheckForm()">O</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('F'); CheckMoreIndex(); idNumbAdd(); CheckForm()">F</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('Ne'); CheckMoreIndex(); idNumbAdd(); CheckForm()">Ne</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('Na'); CheckMoreIndex(); idNumbAdd(); CheckForm()">Na</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('Mg'); CheckMoreIndex(); idNumbAdd(); CheckForm()">Mg</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('Al'); CheckMoreIndex(); idNumbAdd(); CheckForm()">Al</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('Si'); CheckMoreIndex(); idNumbAdd(); CheckForm()">Si</div>
                  </td>
                  <td>
                    <div align="center" id="element" onclick="WriteElement('P'); CheckMoreIndex(); idNumbAdd(); CheckForm()">P</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="field-for-formules">
            <table class="field-table">
              <tbody>
                <tr>
                  <td>
                    <div class="field">
                      <span id="one_elem"></span>
                      <span id="two_elem"></span>
                      <span id="three_elem"></span>
                      <span id="four_elem"></span>
                      <span id="five_elem"></span>
                      <span id="six_elem"></span>
                      <br/><br/>
                      <span id="formula"></span>
                      <br/><br/>
                      <span onclick="Reset()">Очистить</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
    <table>
</div>

Answer 1

Можно сделать вот так.

const elements = [
  'H',
  'He',
  'Li',
  'Be',
  'B',
  'C',
  'N',
  'O',
  'F',
  'Ne',
  'Na',
  'Mg',
  'Al',
  'Si',
  'P'
];

function getHTMLElement(element) {
  const td = document.createElement('td');
  td.textContent = element;
  return td;
}

function fillElements(elements, container) {
  elements.forEach(element => {
    const td = getHTMLElement(element);
    td.addEventListener('click', () => onElementClick(element))
    container.appendChild(td);
  });
}

function fillFormula(formula) {
  const textFormula = formulaToText(formula);
  document.querySelector('.field-for-formules').innerHTML = textFormula;
}

function fillPredefined(formula, predefinedFormulas) {
  const predefined = getPredefinedFormula(formula, predefinedFormulas);
  document.querySelector('.predefined-for-formules').innerHTML = predefined ? predefined.name : "Неизвестно";
}

function formulaToText(formula) {
  let textResult = "";
  for (let item of formula) {
    textResult += item.element + (item.count > 1 ? `<sub>${item.count}</sub>` : "");
  }
  return textResult;
}

function onElementClick(element) {
  createFormula(formula, element);
  fillFormula(formula);
  fillPredefined(formula, predefinedFormulas)
}

fillElements(elements, document.querySelector('.keys-elements'));

const predefinedFormulas = [{
    name: "Водород",
    formula: [{
      element: "H",
      count: 2
    }]
  },
  {
    name: "Яблочная кислота",
    formula: [{
        element: "C",
        count: 4
      },
      {
        element: "H",
        count: 6
      },
      {
        element: "O",
        count: 5
      }
    ]
  }
];

const formula = [];
// Здесь самое главное
function createFormula(formula, element) {
  const lastElement = formula[formula.length - 1];
  // Если последний элемент равен нажатому. то увеличиваем счетчик
  if (lastElement && lastElement.element === element) {
    lastElement.count++;
  } else {
    formula.push({
      element,
      count: 1
    });
  }
}

function getPredefinedFormula(formula, predefinedFormulas) {
  // тут, по хорошему, надо сверять формулы, как массивы. Но мне лень, поэтому будем сверять их строчные варианты
  return predefinedFormulas.find(predefined => formulaToText(predefined.formula) === formulaToText(formula));
}

<div class="container">
  <table class="keyboard-and-field">
    <tbody>
      <tr>
        <td>
          <div class="keyboard-elements">
            <table class="keyboard-table" border="0">
              <tbody>
                <tr class="keys-elements">

                </tr>
              </tbody>
            </table>
          </div>
          <div class="field-for-formules">

          </div>
          <div class="predefined-for-formules">

          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

БЛОГ НА HUSL

Надо, чтобы при вводе одинаковых элементов, индекс следующего возрастал по мере увеличения их количества

Ответы (1 шт):