Обязательное событие onclick - PullRequest
0 голосов
/ 26 мая 2018

Проект, который я должен создать, представляет собой базовый калькулятор с инструкциями if / else.Как новичок в JavaScript, я пытаюсь сделать это шаг за шагом и ранее опубликовал это просто, чтобы начать.Основываясь на этих отзывах, я переделал свой код и хочу проверить, есть ли над чем поработать.

Код, который вы видите в JavaScript, - это то место, где я пытаюсь кодировать, следуя приведенным инструкциям:

"... добавить код, чтобы получить все элементы ввода в массив, называемый input (используяdocument.getElementsByTagName) и использовать цикл for для итерации массива. Во время цикла for вы будете использовать инструкцию if, чтобы пропустить элемент ввода, который не является кнопкой, а затем установить обработчик onclick других элементов ввода вФункция, которая вызывает calc внутри него. Убедитесь, что вы передаете значения input [i] .id (или this.id) для вычисления, чтобы рассчитать правильное значение для своей внутренней переменной calcValue. "

Структура Jasmineприкреплен и выдает ошибку: у кнопок базового тестового сайта калькулятора должно быть привязано событие onclick к calc (this.id);так что я знаю, что в моем коде есть ошибки.Буду очень признателен за любые предложения и помощь, которую вы можете мне дать.Спасибо!

var calcu = function(calcValue) {

  /* "calc.output.value += "1";"" use to output numbers? */

  if (calcValue) {


  }
};

var inputs = new Array(document.getElementsByTagName('input'));
for (var i = 0; i <= inputs.length, i++) {
  if (inputs[i].type == "button") {
    document.getElementById(input.id).onclick = function() {
      console.log(calcu(this.id));
    }
    if (inputs[i].type !== "button") {
      return;
    }
  }

}
<!DOCTYPE html>
<html>

<head>
  <!-- test framework css -->
  <link rel="stylesheet" href="js/test/lib/jasmine-2.1.3/jasmine.css">

  <!-- test framework javascript -->
  <script src="js/test/lib/jasmine-2.1.3/jasmine.js"></script>
  <script src="js/test/lib/jasmine-2.1.3/jasmine-html.js"></script>
  <script src="js/test/lib/jasmine-2.1.3/boot.js"></script>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>A Basic Calculator (If-Else)</title>
  <meta name="description" content="A Basic Calculator">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="content">
    <div id="calculator-container">
      <!-- The name of the form is "calc" -->

      <!-- DO NOT CHANGE THE FORM! Only use external JavaScript files -->

      <form name="calc">
        <label for="output">A Basic Calculator</label>
        <!-- the name of the textbox is "output" -->
        <input id="output" name="output" type="text" readonly>

        <br>
        <input type="button" id="1" value="  1  ">
        <input type="button" id="2" value="  2  ">
        <input type="button" id="3" value="  3  ">
        <input type="button" id="+" value="  +  ">
        <br>
        <input type="button" id="4" value="  4  ">
        <input type="button" id="5" value="  5  ">
        <input type="button" id="6" value="  6  ">
        <input type="button" id="-" value="  -  ">
        <br>
        <input type="button" id="7" value="  7  ">
        <input type="button" id="8" value="  8  ">
        <input type="button" id="9" value="  9  ">
        <input type="button" id="*" value="  x  ">
        <br>
        <input type="button" id="c" value="  C  ">
        <input type="button" id="0" value="  0  ">
        <input type="button" id="equate" value="  =  ">
        <input type="button" id="/" value="&divide;">
      </form>
    </div>
  </div>
  <!-- source files -->
  <script src="js/vendor/math.js"></script>
  <script src="js/ifelse.js"></script>
  <script src="js/test/ifelseSpec.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 26 мая 2018

У вашего js-кода есть эти проблемы

1- Преобразование , в ;

for (var i = 0; i < inputs.length; i++) {

2- Удалить этодополнительно if

if (inputs[i].type !== "button") {
         return;
}

3- Изменить input на inputs[i]

document.getElementById(inputs[i].id).onclick

4- Получить идентификатор элементавместо этого

ev.target.id

Часть добавления прослушивателей событий

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].type == "button") {
    document.getElementById(inputs[i].id).onclick = function(ev) {
      console.log(calcu(ev.target.id));
    };
  }
}

Полный код здесь.Просто завершите свою calcu функцию

var calcu = function(calcValue) {
  /* "calc.output.value += "1";"" use to output numbers? */

  if (calcValue) {}
};

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].type == "button") {
    document.getElementById(inputs[i].id).onclick = function(ev) {
      console.log(calcu(ev.target.id));
    };
  }
}
<html>

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>A Basic Calculator (If-Else)</title>
  <meta name="description" content="A Basic Calculator">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id="content">
    <div id="calculator-container">
      <!-- The name of the form is "calc" -->

      <!-- DO NOT CHANGE THE FORM! Only use external JavaScript files -->

      <form name="calc">
        <label for="output">A Basic Calculator</label>
        <!-- the name of the textbox is "output" -->
        <input id="output" name="output" type="text" readonly>

        <br>
        <input type="button" id="1" value="  1  ">
        <input type="button" id="2" value="  2  ">
        <input type="button" id="3" value="  3  ">
        <input type="button" id="+" value="  +  ">
        <br>
        <input type="button" id="4" value="  4  ">
        <input type="button" id="5" value="  5  ">
        <input type="button" id="6" value="  6  ">
        <input type="button" id="-" value="  -  ">
        <br>
        <input type="button" id="7" value="  7  ">
        <input type="button" id="8" value="  8  ">
        <input type="button" id="9" value="  9  ">
        <input type="button" id="*" value="  x  ">
        <br>
        <input type="button" id="c" value="  C  ">
        <input type="button" id="0" value="  0  ">
        <input type="button" id="equate" value="  =  ">
        <input type="button" id="/" value="&divide;">
      </form>
    </div>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...