I am trying to get this code to work in a way that where I click on item one it will do one function, and when I click on item two it will do a different function. Right now they all go to the same thing and I can't seem to pull it apart.
var list = [];
list[0] = ["zero"];
list[1] = ["one"];
list[2] = ["two"];
list[3] = ["three"];
function Make(){
for ( var i = 0; i < 4 ; i++ ) {
var div = document.createElement("div");
div.style.width = "10px";
div.style.height = "10px";
div.style.background = "white";
div.style.color = "black";
div.style.top = "0px";
div.style.left = "0px";
div.style.margin = "10px 10px auto";
div.style.cursor = "pointer";
div.innerHTML = list[i];
!function(){
var index = 0;
div.onclick = function () { alert("this works"); };
}();
document.body.appendChild(div);
}
}
Did you mean something like this?
<script type="text/javascript">
var list = [];
list[0] = ["zero"];
list[1] = ["one"];
list[2] = ["two"];
list[3] = ["three"];
function Make(){
for ( var i = 0; i < 4 ; i++ ) {
var div = document.createElement("div");
div.style.width = "10px";
div.style.height = "10px";
div.style.background = "white";
div.style.color = "black";
div.style.top = "0px";
div.style.left = "0px";
div.style.margin = "10px 10px auto";
div.style.cursor = "pointer";
div.innerHTML = list[i];
!function(){
var index = 0;
div.onclick = function () { doSomething(this); };
}();
document.body.appendChild(div);
}
}
function doSomething(element){
var value = element.innerHTML;
alert('clicked : '+ value);
switch(value){
case "zero":
//Your code here
break;
case "one":
//Your code here
break;
}
}
Make();
</script>
Related
Currently I am using this code:
var mousePosition;
var offset = [0,0];
var div;
var isDown = false;
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "237px";
div.style.height = "50px";
div.style.background = "red";
div.style.padding = "15px 0px 0px 0px";
div.style.color = "blue";
div.id = "clock";
document.body.appendChild(div);
div.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (mousePosition.x + offset[0]) + 'px';
div.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
The code allows me to move a div using my mouse. I'm not very experienced with JavaScript.
But I was hoping there is an easy method to cache the end location of the Div. So that when I close and open the HTML file, the Div will start in its last cached location.
Thanks.
You can use localStorage to cache the location information into your browser.
window.localStorage.setItem('divPosition', JSON.stringify({
left: div.style.left,
top: div.style.top
}));
console.log(JSON.parse(window.localStorage.getItem('divPosition')));
One caveat is that localStorage doesn't reliably accept anything but string values so adding more robust information requires stringifying and parsing the data.
my extension is a frame that share the screen with any webpages. I have a button that calls this function(dot.js), but its printing over my frame too. How can i set the area allowed to draw the dots?
dot.js
function printMousePos(event, autor) {
var div = document.createElement("div");
div.style.height = "10px";
div.style.width = "10px";
div.style.backgroundColor = "black";
div.style.position = "fixed";
div.style.left = event.clientX+"px";
div.style.top = event.clientY+"px";
div.style.borderRadius = "50px";
console.log(
"clientX: " + event.clientX +
" - clientY: " + event.clientY);
document.body.appendChild(div);
}
document.addEventListener("mousedown", function(evt){
printMousePos(evt, "autor1");
})
;
Thanks
I'm trying to animate an image dynamically by assigning a slope and a starting position randomly. I don't understand why my image is not appearing and when I take the comments off the animate function my code won't run. Everything works properly except the animate functions at the bottom. Any help will be graciously accepted!
//Generate the table for the game
function createTable(difficulty, mineArray)
{
document.getElementById("buttons").style.visibility="hidden";
var time = 0.00;
var row = 0;
var size = 0;
var Lives = 0;
var column = 0;
var input = "";
var completion = 0;
var minesLeft = 0;
if(difficulty == 0)
{
Lives = 5;
size = 600;
row = 30;
column = 20;
}
else if (difficulty == 1)
{
Lives = 3;
size = 600;
row = 30;
column = 20;
}
else if (difficulty == 2)
{
Lives = 5;
size = 1000;
row = 40;
column = 25;
}
else if (difficulty == 3)
{
Lives = 3
size = 1000;
row = 40;
column = 25;
}
for (var i = 0; i < size; i++)
{
if (mineArray[i] == 9)
{
minesLeft = minesLeft + 1;
}
}
//Header
var head = document.getElementById("header").style.width = "100%"
document.getElementById("lives").innerHTML = "Lives: " + Lives;
document.getElementById("title").innerHTML = "Minesweeper Bullet Hell";
document.getElementById("time").innerHTML = "Time: " + time;
document.getElementById("footer").innerHTML = "Mines Left: " + minesLeft;
var name = document.getElementById("Name");
document.getElementById("names").innerHTML = "Welcome " + name.value;
//Main div (where the game is played)
var main = document.getElementById("main");
main.style.width = "100%"
main.style.height = "100%"
//Table
var div = document.getElementById("Table");
div.style.position = "absolute";
div.style.left = "5%";
div.style.top = "5%";
div.style.right = "5%";
div.style.verticalAlign = "true";
if(difficulty == 1 || difficulty == 0)
{
div.style.height = "900";
div.style.width = "600";
}
if(difficulty == 1 || difficulty == 0)
{
div.style.height = "1000";
div.style.width = "625";
}
div.style.zIndex="1";
//Iterate through columns
while(completion < size)
{
for (var i = 0; i < column; i++)
{
var tr = document.createElement('tr');
//Iterate through rows
for(var j = 0; j < row; j++)
{
var place = completion;
var td = document.createElement('td');
//For smaller minefield
if (size == 600)
{
td.style.width = "30";
td.style.height = "auto";
td.style.color = "blue";
//Add an image
var img = document.createElement('img');
img.src = "grey square.png";
img.style.display = "block";
img.style.height = "30";
img.style.width = "30";
td.appendChild(img);
}
//For larger minefield
else
{
td.style.width = "25";
td.style.height = "auto";
td.style.color = "blue";
//Add an image
var img = document.createElement('img');
img.src = "grey square.png";
img.style.display = "block";
img.style.height = "25";
img.style.width = "25";
td.appendChild(img);
}
//If it is a mine
if (mineArray[completion] == 9)
{
td.style.backgroundColor = "grey";
td.style.color = "red";
}
td.style.border = "1px solid #666666"
td.style.textAlign = "center"
tr.appendChild(td);
completion++;
}
//Think about adding an event listener instead of overlaying buttons?
main.appendChild(tr);
}
var cells = document.getElementsByTagName("td");
for (var j = 0; i < row; j++)
{
cells[j].addEventListener("click", function () {
//show number
var thiscol = this.cellIndex;
var thisrow = this.parentNode.rowIndex;
console.log("Clicked at " + thisrow + thiscol);
var cell = main.rows[thisrow].cells[thiscol];
cell.innerHTML = mineArray[(thisrow * row) + thiscol];
})
}
}
setTimeout(function(){bullets()}, 100);
}
function bullets()
{
//randomly generate bullets including starting positions, direction, and trajectory
//Generate starting position
//Generate starting edge
var xpos;
var ypos;
var bullets;
var slopes
var edge = (Math.floor(Math.random() * 4) + 1)
var bullet = document.createElement('img')
var screen = docuemnt.getElementById("bullets");
bullet.src = "blank.png"
bullet.style.position = "relative"
switch (edge)
{
//left edge
case 1:
bullet.style.left = 20 + "px";
ypos = (Math.floor(Math.random() * 100) + 1);
bullet.style.top = ypos + "px";
bullet.id = "left";
break;
//top edge
case 2:
bullet.style.top = 20 + "px";
xpos = (Math.floor(Math.random() * 100) + 1);
bullet.style.right = xpos + "px";
bullet.id = "top"
break;
//right edge
case 3:
bullet.style.right = 20 + "px";
ypos = (Math.floor(Math.random() * 100) + 1);
bullet.style.top = ypos+ "px";
bullet.id = "right";
break;
//bottom edge
case 4:
bullet.style.bottom = 20 + "px";
xpos = (Math.floor(Math.random() * 100) + 1);
bullet.style.right = xpos + "px";
bullet.id = "bottom";
break;
}
//Get the slope
var xslope = (Math.floor(Math.random() * 20) + 5);
var yslope = (Math.floor(Math.random() * 20) + 5);
bullets.append(bullet);
slopes.append(xpos);
slopes.append(ypos);
screen.appendChild(bullet);
//startAnimation(slopes, bullets);
}
/*
function startAnimation(var slopes, var bullets)
{
var j = 0;
var posy;
var posx;
var id;
for(i = 0; i < bullets.size(); i++)
{
while(j < (j+2))
{
id = bullets(i).id;
switch(id)
{
case "left":
posx = bullets(i).style.left;
posy = bullets(i).style.top;
bullets(i).style.left = posx + slopes(j);
bullets(i).style.top = posy + slopes(j+1);
break;
case "top":
posx = bullets(i).style.left;
posy = bullets(i).style.top;
bullets(i).style.left = posx + slopes(j);
bullets(i).style.top = posy + slopes(j+1);
break;
case "right":
posx = bullets(i).style.right;
posy = bullets(i).style.top;
bullets(i).style.right = posx + slopes(j);
bullets(i).style.top = posy + slopes(j+1);
break;
case "bottom":
posx = bullets(i).style.left;
posy = bullets(i).style.bottom;
bullets(i).style.left = posx + slopes(j);
bullets(i).style.bottom = posy + slopes(j+1);
break;
}
j += 2;
}
}
}*/
Looks like there could be a few things making startAnimation stop your script. Here's a few changes to try out:
In your startAnimation function declaration try removing the var keyword before the parameters. So you'd have:
function startAnimation(slopes, bullets) {
Within the for loop, use the .length property to check the array length rather than .size() (see: Array.size() vs Array.length)
The while loop is creating an infinite loop, because the condition (j < (j+2)) will always be true, since it's checking the current value of j. It might be easier to swap this out with a for loop.
Next, within the function, replace the parentheses with square brackets for accessing array indexes (replace bullets(i) with bullets[i] and slopes(j) with slopes[j]. By using parentheses, the JavaScript interpreter is attempting to call these variables as functions. Since you already have a function called bullets I'd recommend renaming either the function or your local variable / parameter to avoid the complexity of dealing with variable name conflicts and scope (more info: What is the scope of variables in JavaScript? )
Why is element A invisible? It seems that appendChild() function is ignored. I can only see the B element. (element A is visible if I push it inside the controls) :(
var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
var b = document.createElement('B');
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.appendChild(a);
map.controls[google.maps.ControlPosition.LEFT].push(b);
Your problem is that you have to display both the elements on a block level
var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
a.style.display = 'block'; //style block level
var b = document.createElement('B');
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.style.border = '1px solid black';
b.style.display = 'block'; //style block level
document.body.appendChild(b);
b.appendChild(a);
https://jsfiddle.net/9rnzbuqh/
<a> is an inline element by default, and you can't set width or height of an inline element. You have to change its display to block:
var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
a.style.display = 'block';
var b = document.createElement('B');
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.style.display = 'block';
b.appendChild(a);
map.controls[google.maps.ControlPosition.LEFT].push(b);
I figured out what I was doing. It worked without setting the display style but I had no idea why.
https://jsfiddle.net/9rnzbuqh/78/
var c = document.createElement('div');
c.style.height = '263px';
c.style.width = '350px';
c.style.marginLeft = '0px';
c.style.marginTop = '0px';
c.style.backgroundImage = "url(https://upload.wikimedia.org/wikipedia/en/5/5f/TomandJerryTitleCardc.jpg)";
var d = document.createElement('div');
d.style.background = 'rgba(230,230,230,0.6)';
d.style.paddingBottom = '70px';
d.style.paddingLeft = '40px';
d.style.paddingRight = '40px';
d.appendChild(c);
document.body.appendChild(d);
and
div {
width:400px;
}
Hi i would like to create new div onmousedown and i would like to resize it on mouse move. But i can't seem to get the mistake i've made.
var x1;
var y1;
var pressed = false;
document.getElementById("primary").onmousedown = function() {
pressed = true;
var ok = true;
if (ok === true) {
div = document.createElement('div');
div.style.backgroundColor = "black";
div.style.position = "absolute";
x1 = Math.round(event.clientX);
y1 = Math.round(event.clientY);
div.style.left = x1 + "px";
div.style.top = y1 + "px";
div.setAttribute("id", "uniqueIdentifier");
document.getElementsByTagName('body')[0].appendChild(div);
}
};
document.getElementById("primary").onmousemove = function() {
if (pressed) {
var div = get.getElementById("uniqueIdentifier");
var x2 = Math.round(event.clientX) + x1;
var y2 = Math.round(event.clientY) + y1;
div.style.width = x2 + "px";
div.style.height = y2 + "px";
}
}
document.getElementById("primary").onmouseup = function() {
pressed = false;
}
#primary {
height: 200px;
width: 200px;
background-color: yellow;
}
<div id="primary"></div>
You had a typo. get.getElementById should be document.getElementById. When I fix that, the code works.
var x1;
var y1;
var pressed = false;
document.getElementById("primary").onmousedown = function() {
pressed = true;
var ok = true;
if (ok === true) {
div = document.createElement('div');
div.style.backgroundColor = "black";
div.style.position = "absolute";
x1 = Math.round(event.clientX);
y1 = Math.round(event.clientY);
div.style.left = x1 + "px";
div.style.top = y1 + "px";
div.setAttribute("id", "uniqueIdentifier");
document.getElementsByTagName('body')[0].appendChild(div);
}
};
document.getElementById("primary").onmousemove = function() {
if (pressed) {
var div = document.getElementById("uniqueIdentifier");
var x2 = Math.round(event.clientX) + x1;
var y2 = Math.round(event.clientY) + y1;
div.style.width = x2 + "px";
div.style.height = y2 + "px";
}
}
document.getElementById("primary").onmouseup = function() {
pressed = false;
}
#primary {
height: 200px;
width: 200px;
background-color: yellow;
}
<div id="primary"></div>