Я хочу использовать getElementsByName в моем коде

Question

Это мой код:

 document.getElementsByName('submitButton').onclick = function(event) {
  event.preventDefault();

  var num1 = parseFloat(document.getElementsByName('valueA')[0].value),
      num2 = parseFloat(document.getElementsByName('valueB')[0].value),
      arithmeticOperator = document.getElementsByName('arithmeticOperator')[0].value,
      output = document.getElementsByName('result');

  switch(arithmeticOperator) {
    case '+':
        result = num1 + num2;
        break;
    case '-':
        result = num1 - num2;
        break;
    case '*':
        result = num1 * num2;
        break;
    case '/':
        if(num2 != 0)
        {
            result = num1 / num2;
        }else {
            result = 'Dela inte med 0!';
        }
        break;
    default:
        result = 'Error';
  }
  window.alert(result);
  return false;
};

Моя проблема в том, что я не могу заставить свой код генерировать всплывающее окно с ответом. Когда я использую ID в моем HTML, он работает нормально, но я хотел бы узнать, как работает getElementsByName. Поэтому я вообще не хочу менять свой HTML, но мне нужна помощь с моим JS.

Answer 1

getElementsByName возвращает массив, подобный объекту, поэтому вам нужно получить элемент по индексу и добавить прослушиватель

document.getElementsByName('submitButton')[0].onclick = function(event) {
}

Примечание. На вашей странице я не вижу кнопку с указанным именем.

---

Поскольку у вас есть форма, лучше использовать событие отправки формы

document.getElementById('calcForm').onsubmit = function (event) {
    event.preventDefault();

    var num1 = parseFloat(document.getElementsByName('valueA')[0].value) || 0,
        num2 = parseFloat(document.getElementsByName('valueB')[0].value) || 0,
        arithmeticOperator = document.getElementsByName('arithmeticOperator')[0].value,
        output = document.getElementsByName('result');

    switch (arithmeticOperator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if (num2 != 0) {
                result = num1 / num2;
            } else {
                result = 'Cant devide bu 0';
            }
            break;
        default:
            result = 'Error';
    }
    document.getElementsByName('result')[0].innerHTML = result;
};

Демо: скрипка