javascript not working to create divs inside of another div [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I am trying to create 10 divs when a button is clicked, however nothing is happening. I think the issue is with my javascript, but nothing is shown in the console. What am I doing wrong? And what can I do to fix it? Any help would be greatly appreciated.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Space Invaders
</title>
<script type = 'text/javascript' src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js" type="text/javascript"> </script>
</head>
<body>
<div>
<div id="startbtn"><br />Start Game
</div>
<br />
<center>
<div id="game" onClick = 'buttonClick'>
</div>
<div id="game2">
</div>
</center>
<div id="titlepage">
</div>
</div>
</body>
</html>
Javascript
var row1 = [];
$(document).ready(function()
{
$('#startbtn').click(function(){
for (var i = 0; i<9; i++)
{
row1[i] = document.createElement('div');
row1[i].className = 'grid';
document.getElementById('game').appendChild(row1[i]);
}
});
});
CSS
#startbtn
{
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #000000;
font-family: Arial;
opacity: 0.5;
margin: auto;
}
#game
{
display: none;
margin: auto;
}
#game2
{
display: none;
margin: auto;
}
.grid
{
display: inline-block;
background-color: #000000;
width: 20px;
height: 20px;
border-radius: 2px;
}

Working example:
JS FIDDLE
why dont you use jquery to create DOM element and append?
var row1 = [];
$(document).ready(function()
{
$('#startbtn').click(function(){
for (var i = 0; i<9; i++)
{
var div = $("<div>").addClass("grid");
div.appendTo($("#game"));
}
$("#game").show();
});
});
CSS
#game
{
margin: auto;
}

You need to unhide the game DIV:
$('#startbtn').click(function(){
for (var i = 0; i<9; i++) {
row1[i] = document.createElement('div');
row1[i].className = 'grid';
document.getElementById('game').appendChild(row1[i]);
}
$("#game").show();
});
DEMO

Related

I can't get my html to execute my js file on Electron

I might be really bad at this but I've spent the last two hours on it so if someone could indicate me what's wrong I would be eternally grateful.
I am training on Electron and I am trying to make this game, Visual Novel style, that features dialogs, pictures and minigames. I am trying to set up the dialogs so that they may switch when the player presses "Space". To do that, I created a js file and tried to set it up, and I think the code should be working, but nothing happens when I press space... My best guess is that the app doesnt recognize the js file even tho the pathing should be good !
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="blanche.js"></script>
<meta charset="UTF-8" />
<title>Hello World!</title>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
</head>
<body tabindex="0">
<section class="sprite">
<h1>sprite</h1>
</section>
<section class="score">
<h1>score</h1>
</section>
<section class="dialog" id="dialog">
<p id="text" class="text">Défaut</p>
</section>
<section class="loading">
<h1>loading</h1>
</section>
<section class="rps">
<h1>rps</h1>
</section>
</body>
</html>
CSS:
html, body{
height: 100%;
margin: 0;
}
h1{
margin: 0;
padding: 0;
}
body{
display: grid;
grid-template-rows: 42% 5% 25% 3% 25%;
gap: 0;
}
.sprite{
background-color: grey;
margin: 0;
padding: 0;
}
.score{
border-top: 3px black solid;
}
.dialog{
border-top: 3px black solid;
margin: 0;
padding: 0;
background-color: rgb(56, 53, 53);
}
.text{
color: green;
font-size: 1.3em;
font-weight: 500;
display: block;
}
.loading{
border-top: 3px black solid;
}
.rps{
border-top: 3px black solid;
}
JS:
const dialog = document.getElementById("dialog");
const text = document.getElementById("text");
let dialogueIndex = 0;
document.addEventListener("keydown", (event) => {
if (event.code === "Space") {
dialogueIndex++;
switch (dialogueIndex) {
case 1:
text.innerHTML = "Je vais bien, merci ! Et toi ?";
break;
case 2:
text.innerHTML = "Je vais bien aussi, merci !";
break;
case 3:
dialog.style.display = "none";
break;
default:
break;
}
}
});
I tried showing a console log at the very beginning of the js file, nothing happened. I verified the names of my files and their pathing 10 times, nothing looks wrong...
Solved, thank you ! I didnt see the message in the right console, in fact my js was trying to execute before my html was fully loaded, and so, my code couldn't target the element that didnt exist yet. As a solution, I added a window.onload = function() condition with my js, so that it would only activate once the page is loaded. thank you for helping !

Basic shopping cart using array.push(); [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I would like to make a basic shopping cart app in which you can click on items, every click should add the item to an array. At the end you should be able to press a total button and see all the items you have added, but so far it's not working.
Code so far:
function add() {
var shoppingCart = [];
document.getElementById("itemOne").addEventListener("click", function() {
shoppingCart.push("One");
});
document.getElementById("itemTwo").addEventListener("click", function() {
shoppingCart.push("Two")
});
document.getElementById("total").addEvenetListener("click", function() {
document.getElementById("display").innerHTML =
shoppingCart;
})
}
Jsfiddle: https://jsfiddle.net/xpb8oarx/
Typo # addEventListener
Never called add() you do not need that anyways
var shoppingCart = [];
document.getElementById("itemOne").addEventListener("click", function() {
shoppingCart.push("One");
});
document.getElementById("itemTwo").addEventListener("click", function() {
shoppingCart.push("Two");
});
document.getElementById("total").addEventListener("click", function() {
document.getElementById("display").innerHTML = shoppingCart;
});
.container {
width: 70%;
background-color: black;
height: 300px;
margin: 0 auto;
}
#itemOne,
#itemTwo {
width: 100px;
height: 100px;
border: 1px solid white;
margin: 1%;
color: white;
}
#display {
color: white;
text-align: center;
}
<div class="container">
<div id="itemOne" class="itemOne">
<button class=" item">Chicken</button>
</div>
<div id="itemTwo">
<button class="item">Veggies</button>
</div>
<button id="total">Total</button>
<h1 id="display"></h1>
</div>
You'll find a tutorial HERE which explain how to implement a cart in pure HTML5 and Vanilla.
Tuto written by a french JS ninja

Add different styles (tagcloud/linkcloud) to hyperlinks at once

I need to create simple link display like below image;
What I thought is add separate styles for all of these links. but its looks not the best way to do this.
have anyone tried something like this? can I do this with JavaScript or JQuery?
This allows you to randomly position the Text. Maybe you could edit it slightly for your needs?
<html>
<head>
<style type='text/css'>
body {
border: 1px solid #000;
height: 300px;
margin: 0;
padding: 0;
width: 300px;
}
.box {
height: 30px;
position: absolute;
width: auto;
}
#div1 { background:0;color:red; }
#div2 { background:0;color:blue; }
#div3 { background:0; color:green;}
</style>
<script type='text/javascript'>
function setDivPos() {
for (i=1; i<=3; i++) {
var x = Math.floor(Math.random()*250);
var y = Math.floor(Math.random()*250);
document.getElementById('div'+i).style.left = x + 'px';
document.getElementById('div'+i).style.top = y + 'px';
}
}
</script>
</head>
<body onload='setDivPos();'>
<div id='div1' class='box'>one word</div>
<div id='div2' class='box'>another word</div>
<div id='div3' class='box'>and so on</div>
</body>
</html>
Anyone have time to help?
Alternative
An alternative to this would be: this demo
Links:
There are several links here that you might be interested in

Javascript word game how to make function not replace element

Question has been answered
I'm trying to make a small word game,
and I already encountered a small problem I couldn't figure out.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Word Game</title>
<!-- CSS -->
<link rel="stylesheet" type="StyleSheet" href="style.css" />
<!-- Scripts -->
<script src="script.js"></script>
</head>
<body>
<h1>Word Game</h1>
<div id="board">
<p>Do you want to play? (yes/no)</p>
</div>
<div id="form">
<form>
<fieldset>
<input type="input" id="userTxt"></input>
<button type="button" id="btn" onclick = "post()">Send</button>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
*{
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
}
#board {
width: 75%;
height: 100%;
min-height: 300px;
border: 1px solid black;
}
#board p {
padding-left: 3%;
}
#form {
width: 75%;
margin-top: 3%;
}
input {
margin: auto;
display: block;
}
button {
display: block;
clear: both;
margin-left: auto;
margin-right: auto;
}
JavaScript:
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerHTML = "<p>- " + text + "</p>";
}
Now, the function works alright. But,
if you check the code you'll see that, for example if you'd write "p" in the box and submit it and then for example "e", the "p" will CHANGE to "e" and not add a new <p></p> to the board. How do I make it add a new element, and not replace the old element?
Try to just concat the innertext:-
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerText = boardId.innerText.trim();
boardId.innerText += " - " + text;
}
Edit the html to add an id directly to your <p> tag for ease of access.
<div id="board">
<p id="text-container">Do you want to play? (yes/no)</p>
</div>
And change the function as this
function post() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("text-container");
var text = userTxt.value;
if (boardId.textContent == "Do you want to play? (yes/no)") {
boardId.textContent = "- " + text;
} else {
boardId.textContent += text;
}
}
Try it here on this fiddle.

Removing dynamic divs made with JS on click

My code knowledge is very limited, comes from CodeHS and Codecademy so bear with me.
So I am trying to make a list of numbers, that can be deleted on click. So far so good with the number list, but I still can't figure how to remove them when I click the div box.
I know theres JSFiddle, but I think this is best I could do:
http://www.codecademy.com/rfabrega/codebits/xZ61aJ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=203">
<title>Lista Mundial</title>
<style>
.divContainer {
width: 35px;
height: 25px;
border: solid 1px #c0c0c0;
background-color: #e1e1e1;
font-family: verdana;
color: #000;
float: left;
}
.text {
font-size: 15px;
font-family: verdana;
color: black;
margin-top: 4px;
}
</style>
</head>
<body>
<script type="text/javascript">
for(var i = 1; i <= 639; i++){
var divTag = document.createElement("div");
divTag.id = i;
divTag.className = "divContainer";
document.body.appendChild(divTag);
var pTg = document.createElement("p");
pTg.setAttribute("align", "center");
pTg.className = "text";
pTg.innerHTML = (i);
document.getElementById(i).appendChild(pTg);
}
</script>
</body>
</html>
you have to create a function on click that deletes the target div tag:
so in your code, after creating the div element. insert this:
divTag.onclick = function(){this.parentNode.removeChild(this)};
$(document).ready(function(){
$('p').hide();
$("body").on("click",".divContainer",function(){
$(this).remove();
});
});

Categories

Resources