У меня есть задание сделать несколько ошибок на экране случайным образом, но у меня возникают проблемы с добавлением divs в тело html через javascript.
<head>
<title>Fly little bug! Fly!</title>
<script type="text/javascript">
/* <![CDATA[ */
var numBugs = 0;
var body = document.getElementsByTagName("body");
function bug(startX, startY, xSpeed, ySpeed){
var self = this;
this.xPos = startX;
this.yPos = startY;
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
this.divId = "bug" + numBugs;
this.div = document.createElement("div");
this.div.innerHTML = "test";
body.appendChild(self.div);
this.fly = function(){
self.xPos += self.xSpeed;
self.yPos += self.ySpeed;
}
this.fly();
this.flyInterval = setInterval(function(){ self.fly(); },5000);
numBugs++;
}
/* ]]> */
</script>
</head>
<body onload = "var bug1 = new bug(10, 20, 5, 3);">
</body>
</html>
Я вижу две проблемы.
Функция getElementsByTagName возвращает массив элементов. Вы должны быть явным, чтобы вам нужен первый элемент массива.
var body = document.getElementsByTagName("body")[0];
Вы, по сути, говорите: "Дайте мне все теги в документе типа" тело ". Он дает вам список тегов, и вы должны получить первый, хотя в любом документе HTML должно быть только одно "тело". [0]
в коде выше дает вам первый.
Вы пытаетесь получить доступ к телу до его создания. <Script> встречается в документе перед тегом <body>, поэтому во время выполнения скрипта тело не существует. Вам нужно переместить вызов getElementsByTagName внутри функции bug().
document.body.innerHTML += '<div>Div Content</div>';
Посмотрите на jQuery, если вы хотите упростить простые манипуляции с DOM.