i want to programm a tile map with just 1 picture. It shall be a 5x5 field of small pictures. I have wrote some Javascript Code with 2 nested Loops. With this solution, only 1 pictures is printed. When i remove the br Tag in the second loop, 5 pictures are printed, but only in a row, not among themselves. Whats the problem? How can i realize that?
window.onload=function() {
document.getElementById('button_generateField').addEventListener('click', function generateField (spacefields) {
for (var i = 0; i <= 4; i++) {
var horizontal_field = new Image();
horizontal_field.src = 'Grafiken/spacefields.jpg';
document.body.appendChild(horizontal_field);
for (var j = 0; j <= 4; j++){
var vertical_field = new Image();
vertical_field.src = '/Grafiken/spacefieldsd.jpg';
document.body.appendChild( '<br>' + vertical_field);
};
};
});}
HTML
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
</head>
<body>
<div id="header">
<img src="testbanner1.jpg" alt="banner" width="1500" height="150px" >
</div>
<div id="main">
<button id="button_generateField">Generate Field!</button>
</div>
</body>
</html>
/Grafiken/spacefieldsd.jpg looks like a typo.
use document.createElement("img") instead of new Image().
your <br> will not work, you need to document.createElement("br")
var btn = document.getElementById("button_generateField");
var div = document.getElementById("main");
var rows = 4;
var cols = 4;
var x = 0;
var y = 0;
btn.addEventListener("click", function(){
for(y=0;y<rows;y++){
for(x=0;x<cols;x++){
var img = document.createElement("img");
img.src = "https://via.placeholder.com/100x100";
img.onload = function(){
}
div.appendChild(img);
}
div.appendChild(document.createElement("br"));
}
});
<button id="button_generateField">Generate Field!</button>
<div id="main">
</div>
Related
I am trying to add new elements in JavaScript, and when I hover my mouse over them I want to see how many letters are in the innerHTML. The function works on elements added in html, but the new ones not.
var input = document.getElementById("input")
var button = document.getElementById("button");
button.onclick = function () {
var p = document.createElement("p");
p.innerHTML = input.value ;
document.body.appendChild(p);
p.id="p";
}
var ar = document.getElementsByTagName("p");
for (var i = 0; i < ar.length; ++i) {
ar[i].title=ar[i].innerHTML.length;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input id="input"></input>
<button type="button" id="button"> click</button>
<p>p1</p>
<p>p2</p>
</body>
</html>
What I want to achive: number of letters of element I hover on,
What I get: number of letters of elements I hover on, but only these that were added in html.
You could change your click handler like this:
button.onclick = function () {
var p = document.createElement("p");
p.innerHTML = input.value ;
document.body.appendChild(p);
p.id="p";
p.title = input.value.length
}
it would be better to make a new function though, which will perform this code so that you have less code duplication, i.e. I'd rewrite it like this:
function applyFormatting(pElement) {
pElement.title = pElement.innerHTML.length
}
button.onclick = function () {
var p = document.createElement("p");
p.innerHTML = input.value ;
document.body.appendChild(p);
p.id="p";
applyFormatting(p);
}
var ar = document.getElementsByTagName("p");
for (var i = 0; i < ar.length; ++i) {
applyFormatting(ar[i]);
}
that way the "formatting" you want to apply to your already existing p elements is centralized in a function and you know that the elements will undergo the exact same transformation.
That happens because you are adding title only on page load. And titles are not added when new elements are created. You should do something like that on button click:
button.onclick = function () {
var p = document.createElement("p");
p.innerHTML = input.value ;
document.body.appendChild(p);
p.id="p";
p.title = input.value.length;
}
I'm trying to output a random image from my array and then remove it from the array afterwards for a matching game. I'm new to programming in general and I've seen (what I'm sure are) easier ways of doing it but nothing I understand yet so I'm trying it this way. The problem is that I can't get an image to print out and I'm not sure why. Any help would be appreciated! thanks!
HTML
<script>
printImage(); Sites.splice(r,1);
</script>
JS
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'img0.jpg';
...
imgArray[23] = new Image();
imgArray[23].src = 'img23.jpg';
ImageRotation = imgArray.length;
FirstHalf = '<img src="img';
LastHalf = '.jpg" style="width:100px; height: 100px;">';
function printImage() {
var r = Math.ceil(Math.random() * ImageRotation);
document.write(FirstHalf + r + LastHalf);
}
This is how you can do what you are tried to achieve:
I've used setInterval to demonstrate.
Fiddle
HTML:
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
JavaScript:
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
setInterval(function() {
var im = document.getElementsByTagName('img')[0];
im.src = imgs[Math.round(Math.random() * (imgs.length - 1))];
}, 1000);
Here is another way of setting the image, based on #chipChocolate.py's answer, and addressing OP's requirement that each image is removed from the list. Instead of changing the first image in the HTML, it rewrites the inner HTML within a <div> container.
<html>
<head>
<script type="text/javascript">
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
var pictures = imgs.length;
var picim =[];
for (var i=0; i<pictures; i++)
picim [i] = i;
var num = 0; // current index of picture number
function randpic() {
if (pictures > 1) {
pictures--;
for (var i=num; i<pictures; i++) // remove current picture index
picim[i] = picim[i+1];
num = Math.floor(Math.random() * pictures);
var content = '<IMG src="' + imgs[picim [num]] + '" />';
document.getElementById('randpic').innerHTML = content;
}
}
</script>
</head>
<body>
<div id="randpic" onClick="javascript:randpic()">
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
</div>
</body>
</html>
Can someone pls tell me what I am doing wrong. I am trying to add text to my stage but the stage doesn`t show any text and there are no errors given. Did I do something wrong. I am adding the txt with addChild so it should appear? why is it not showing anything, it is not because of the color because I changed the color of the text.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>game</title>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="js/easel.js"></script>
</head>
<body onload="init();">
<canvas id=canvas width="960" height="580"></canvas>
</body>
</html>
javascript:
var canvas;
var stage;
var score;
var bitmap;
var bmpList;
var txt;
var play;
function init() {
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
score = 0;
var image = new Image();
image.src = "imgs/stone.png";
image.onload = maakTegenstander;
}
function maakTegenstander(event){
var image = event.target;
var container = new Container();
stage.addChild(container);
var l = 5;
bmpList=[]; // dit is een array
for(var i=0; i<l; i++){
bitmap = new Bitmap(image);
container.addChild(bitmap);
bitmap.name="stone"+i;
verwijderTegenstander(bitmap);
bitmap.regX = bitmap.image.width/2|0;
bitmap.regY = bitmap.image.height/2|0;
bitmap.mouseEnabled = true;
bmpList.push(bitmap);
}
txt = new Text ("Score: 0", "24px Arial", "#333");
txt.textBaseline="top";
txt.x = 400;
txt.y = 20;
stage.addChild(txt);
play=true;
Ticker.addListener(window);
}
function verwijderTegenstander(stone){
stone.y = canvas.height - 700;
stone.x = canvas.width* Math.random() + 30;
stone.speed = (Math.random()*5)+2;
}
function tick(){
if(play == true){
var l=bmpList.length;
}
if (play == true){
var l = bmpList.length;
for(var i=0; i<l; i++){
var bmp = bmpList[i];
if (bmp.y < 650){
bmp.y += bmp.speed;
}else{
//gameOver();
console.log("game over");
}
}
}
txt.text = "Punten: "+score;
stage.update();
}
Here's a fiddle based on your code: http://jsfiddle.net/fXgeg/1/
I've changed two things:
For every call to easeljs module, I've added 'createjs.' e.g.
createjs.Stage
I've changed the ticker listener registration like this:
//Ticker.addListener(window); <- this is wrong
createjs.Ticker.addEventListener("tick", tick);
This way you provide the event type - "tick" and the function which should be called every time this event occurs - tick()
There is one html page and I have a lot of same images. I want to add alot of same images and when I click one I want it to change. If I have one picture these codes OK! but if I have a lot of same pictures How can I do this? Please can you show me a solution way ?
<html>
<head>
</head>
<style>
#im{
margin-left:250px;
margin-right: 0px;
}
</style>
<body>
<script>
function changeImage()
{
element=document.getElementById('im')
if (element.src.match("image"))
{
element.src="picture1.png";
}
else
{
element.src="image1.png";
}
}
</script>
<img id="im" onclick="changeImage()"
src="picture1.png">
</body>
</html>
// store image names here
var images = [
"picture1.png",
"picture2.png",
"picture3.png",
"picture4.png",
"picture5.png",
];
// preload images to reduce lag time
var imageArray = [];
for (var i = 0, len = images.length; i < len; i++) {
imageArray[i] = new Image();
imageArray[i].src = images[i];
}
// the change function
var index = 0;
function changeImage()
{
var element = document.getElementById('im');
element.src = images[index];
index++;
if (index === images.length) index = 0;
}
I want to have some hyperlink images that keep changing after a period of time..I have used 2 arrays images and links..2 respective functions execute that change image and links respectively after 2 seconds of time..But I am getting a blank screen as output..I wrote the code as:
<html>
<head>
<title> New Document </title>
</head>
<body>
<img id="img" width="1300" height="200"/>
<link id="link" >
<script type="text/javascript">
var x=0;
var y=0;
var images = new Array();
var links = new Array();
images[0] = "D:\images\31.jpg";
images[1] = "D:\images\32.jpg";
links[0] = "https://www.google.co.in" ;
links[1] = "https://www.facebook.com" ;
function changeImage()
{
document.getElementById("img").src=images[x];
x = (x + 1) % images.length;
}
function changeLinks()
{
document.getElementById("link").href=links[y];
y = (y + 1) % links.length;
}
window.onload = function() {
changeImage();
setInterval(changeImage,2000);
}
window.onload = function() {
changeLinks();
setInterval(changeLinks,2000);
}
</script>
</body>
</html>
Your problem is this:
images[0] = "D:\images\31.jpg";
images[1] = "D:\images\32.jpg";
those are supposed to be hyperlinks, not file paths! Also, the backslash is an escape char in JS, so you need to double it (\\). So try something like:
images[0] = "file:/D:/images/31.jpg";
images[1] = "file:/D:/images/32.jpg";