Что не так с моим объектом JavaScript? - PullRequest
Новая
       2

Что не так с моим объектом JavaScript?

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

Я только начал изучать ООП в javascript, и я пытаюсь переписать простую программу, используя ООП, которую я ранее написал как процедурную программу.Программа представляет собой тестер реакции, в котором на экране появляется случайная фигура, и пользователь должен щелкнуть по ней как можно быстрее.После нажатия на форму отображается время в секундах, которое потребовалось пользователю, чтобы ответить.

Я не продвинулся очень далеко, я просто пытаюсь сделать квадрат случайного размера и случайный цвет на экране.экран, но я даже не могу с этим справиться.Смотрите мой код ниже: 

<script type="text/javascript">

function Shape () {
  this.x = Math.floor(Math.random()*850);
  this.y = Math.floor(Math.random()*850);
  this.draw();
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  var left = Math.floor(Math.random()*850);
  var top = Math.floor(Math.random()*850);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    position: "relative",
    left: this.left,
    top: this.top,
    width: widthAndHeight,
    height: widthAndHeight,
  });
  $("body").append(this.shapeElement);
}

Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: 'randomColour'});
}

var square = new Shape();


</script

Пока квадрат не появится на экране.Все, что происходит, - это добавление div случайного размера, но он всегда находится в верхнем левом положении и не имеет цвета фона.Консоль не помогает мне, потому что она не показывает, что в моем коде есть какие-либо ошибки.Я в замешательстве и нахожу переход в ООП крайне запутанным.Любая помощь в понимании того, почему это не сработает, будет чрезвычайно признательна!

Ответы [ 2 ]

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

Есть ряд вопросов.

1) метод color () никогда не вызывается.

2) Ссылка this.top и this.left внутри конструкции css также не будет работать.

3) randomColour - это переменная, а не строковый литерал.

Исправлены проблемы и встроен код здесь.Посмотрите. 

function Shape () {
  this.x = Math.floor(Math.random()*850);
  this.y = Math.floor(Math.random()*850);
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  var left = Math.floor(Math.random()*850);
  var top = Math.floor(Math.random()*850);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    'margin-left': left,
    'margin-top': top,
    'width': widthAndHeight,
    'height': widthAndHeight,
  });
  $("body").append(this.shapeElement);
}

Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: randomColour});
}


$(document).ready(function() {
var square = new Shape();
square.draw();
square.colour();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shape</title>
</head>
<body>
<div></div>
</body>
</html>
0 голосов
/ 23 мая 2018

Несколько небольших ошибок:

Предупреждение: function Shape устанавливает x и y свойства, которые не используются.

Ошибка: Shape.prototype.draw определяет переменные left и top, но ссылается на них как this.left и this.top в инициализаторе объекта CSS.В качестве свойств они не определены - уберите два квалификатора this..

Ошибка: Shape.prototype.colour не вызывается, поэтому элементы DIV прозрачны.Вставьте вызов this.colour() после, скажем, установки CSS.

Ошибка: Значение объекта инициализатора css для цвета фона должно быть именем переменной, randomColour не строковым литералом 'randomColour'.Удалите кавычки вокруг идентификатора.

Серьезное предупреждение: цикл for в функции colour не объявляет i и создает его как неявную глобальную переменную.Вставьте "use strict"; в начале файлов сценариев или тел функций, чтобы сгенерировать ошибку для необъявленных переменных.

Таким образом, ни одна из ошибок не генерирует ошибки на консоли (неопределенные значения CSS игнорируются), но работает для предотвращениякод работает.

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

Нет похожих вопросов

...