使用javascript填充页面html div元素 [英] Populating a pages html div elements using javascript

问题描述

我正在完成该项目： https://googlecreativelab.github.io/ coder-projects / projects / pop_up_penguins / ，它允许用户点击页面内的8只企鹅。然而，我试图在JavaScript中填充页面而不是html，这样玩家可以轻松地调整游戏内企鹅的数量。

我正在考虑先构建

  penguinarray [count]; 
  

然后使用for循环根据数组大小重复放置每个企鹅。

  for（var i = 0; i< penguinarray.length; i ++）{
 document.createElement（penguin1） ; 
} 
  

我不知道如何仍然可以随机化所有不同类型的企鹅和从8个可用的雪丘，或允许页面改变给予不同数量的企鹅。

您可以允许 user 可指定应使用

 >  var penguinCount = prompt（应该有多少只企鹅？）; 
  

为了随机化企鹅的类型 strong> Math。随机（） 来获取 1 和 8 ，并在创建元素时将该数字附加到单词 penguin 的末尾。

以下将创建与用户指定的企鹅一样多的企鹅，每只企鹅都有一个介于 penguin1 和 penguin8 之间的随机类： p>

  for（var i = 0; i< penguinCount.length; i ++）{
 document.createElement（penguin + Math.ceil（Math.random（）* 8））; 
} 
  

雪丘也是如此;只是利用第二个变量：）

然而，假设企鹅之间的唯一区别是他们的形象，那就是利用一个单个类 .penguin ，而是在为所述企鹅创建元素时随机化背景图像，这可以通过 style strong> property：

$ p $ for（var i = 0; i< penguinCount.length; i ++）{
var企鹅= document.createElement（企鹅）;
penguin.style.backgroundImage =url（'penguin'+ Math.ceil（Math.random（）* 8）+'.png'）;

$ / code>

做后者意味着你只需要一个类就可以完成所有的企鹅，显着减少你的CSS：）

希望这有助于！

I am completing the project: https://googlecreativelab.github.io/coder-projects/projects/pop_up_penguins/ which allows a user to click on 8 penguins within a page. However i'm trying to populate the page in javascript rather than html such that a player can easily adjust the number of penguins within the game.

I was thinking to first build an array from some user selected number.

penguinarray[count];

Then use a for loop to repeatedly place each penguin based on the size of the array.

for(var i = 0; i < penguinarray.length; i++) {
    document.createElement("penguin1");
}

Im not sure however how I can still randomize all the different types of penguins and the snow mounds from the 8 available, or allow the page to change given a different number of penguins.

解决方案

You can allow the user to specify how many penguins there should be with the prompt() method:

var penguinCount = prompt("How many penguins should there be?");

In order to randomise the type of penguin, you'd call Math.random() to grab a random number between 1 and 8, and affix that number to the end of the word penguin when creating your elements.

The following will create as many penguins as is specified by the user, each with a random class between penguin1 and penguin8:

for(var i = 0; i < penguinCount.length; i++) {
  document.createElement("penguin" + Math.ceil(Math.random() * 8));
}

The same can be done for the snow mounds as well; just make use of a second variable :)

However, assuming the only difference between the penguins is their image, it would be to make use of a single class of .penguin, and instead randomise the background image when creating the element for said penguin, which can be done with the style property:

for(var i = 0; i < penguinCount.length; i++) {
  var penguin = document.createElement("penguin");
  penguin.style.backgroundImage = "url('penguin'" + Math.ceil(Math.random() * 8) + "'.png')";
}

Doing the latter would mean you'd only need a single class for all the penguins, significantly cutting down on your CSS :)

Hope this helps!

这篇关于使用javascript填充页面html div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！