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
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How to display pop-window with aggregated data when Double-click event in jQuery?I use below code to get aggregated data, each quessionId has many related reasons. when I click/choose questionId button/event, OnClick select questionId and Double-click to remove/cancel, when OnClick select a questionId, related reasons dictonary will display below questionId, if Double-click remove that questionId, and related reasons dictonary will display in a `pop-windows' as below picture(User can click 'Confirmed' button after 5
seconds, when confimed, closed pop-windows automatically).
Below is my partial code of .js code in jQuery, all related data is fine by below code:
function fmtQuestionsByID(id,callback){
if(!DATA.questions[id] || !$('#card_'+id) )return;
var project = DATA.projects[DATA.questions[id].projectId];
if(!project)return;
var issueQuestionLists = DATA.alltags.reduce(function(a,b){
if(a[b['quessionId']]) {
a[b['quessionId']].push({name:b['name'],color:b['color'],description:b['description'],reason:b['reason'],question:b['question'],issueId:b['issueId'],department:b['department'],_id:b['quessionId']})
} else{
a[b['quessionId']] = [{name:b['name'],color:b['color'],description:b['description'],reason:b['reason'],question:b['question'],issueId:b['issueId'],department:b['department'],_id:b['quessionId']}]
}
return a;
},{});
var d = 0;
for(var i=0;i < DATA.questions[id].tags.length;i++){
var lid = DATA.questions[id].tags[i];
for(var l in issueQuestionLists){
var lb = issueQuestionLists[l]
for(var c=0;c< lb.length;c++){
var lc = lb[c];
if(lc._id == lid){
d++;
var info = lc;
console.log('info', info);
$('.tags_question').append(d + '['+info.name+']' + info.description + '。' + 'Reason: '+info.reason+ '。' ||'[no data]' );
}
}
}
}
}
Below code to OnClick to select and Double-click to remove.
function _fmtQuetionTags(){
fmtUsers( DATA.lastShowID ,function(html){
html = '<span class="add_plus_pic question projectinfo_addquestion" title="" href="#" aria-label=""><i class="fa fa-plus"></i></span>' + html;
$('#projectinfoUsers').html( html );
$('#projectinfoUsers .js-question').attr('title','Double-click remove question').unbind().on('dblclick',function(){
var id = $(this).data('id');
doSubmitSetQuestion(DATA.questionid,DATA.lastID,id,function () {
});
});
});
}
And I use below html to get above data
<div id="questioninfo">
<span class="tags_question"></span>
</div>
Based on your description, I created the following example code.
$(function() {
$("#showAlert").click(function() {
$(".alert.dialog").show("fast", function() {
setTimeout(function() {
$(".alert.dialog button[disabled]").prop("disabled", false);
}, 5000);
});
});
$(".ok.btn").click(function() {
$(this).closest(".dialog").hide("fast", function() {
$(".ok", this).prop("disabled", true);
});
});
$(".dialog li").click(function() {
$(this).removeClass("marked").addClass("selected");
}).dblclick(function() {
$(this).removeClass("selected").addClass("marked");
})
});
.alert {
width: 340px;
border: 1px solid #ccc;
border-radius: 6px;
padding: 0;
display: none;
}
.title {
width: 100%;
background: #eee;
text-align: center;
font-weight: bold;
border-bottom: 1px solid #ccc;
padding-top: 6px;
padding-bottom: 6px;
}
.response {
width: 95%;
margin-top: 10px;
padding-left: 6px;
}
.button-set {
width: 100%;
margin: 5px;
text-align: center;
}
.button-set .default {
font-weight: bold;
}
.selected {
background-color: #FF0;
}
.marked {
background-color: #F00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showAlert">Alert</button>
<div class="alert dialog">
<div class="title">Alert 1</div>
<div class="response">This is an alert description
<ul>
<li>Option 1</li>
</ul>
</div>
<div class="button-set">
<button class="ok btn default" disabled="disabled">Okay</button>
</div>
</div>
Hopefully this is similar to what you're doing and what type of functions you're trying to achieve. This example makes use of various methods, .click() and .dblclick(). It also uses setTimeout() in the callback for .show().
See More:
https://api.jquery.com/click/
https://api.jquery.com/dblclick/
https://api.jquery.com/show/
https://api.jquery.com/hide/
https://www.w3schools.com/jsref/met_win_settimeout.asp
This question already has answers here:
why javascript this.style[property] return an empty string? [duplicate]
(2 answers)
Closed 2 years ago.
i have a div and button i click the button fist time no response and click again and show
function banne() {
var ban = document.getElementById("content");
//consloe.log(ban.style.display === "none");
if (ban.style.display === "none") {
ban.style.display = "block";
} else {
ban.style.display = "none";
}
}
.banner-content {
display: none;
height: 100px;
color: #fff;
background: #1b1b1b;
}
<button class="banner" onclick="banne()"> know </button>
<div class="banner-content" id="content">
Some Data
</div>
here the console value show false value but i write the style inline style="display:none" in div class banner-content it working, why the style sheet value not taken ,any idea?
Javascript can't access the style mentioned in the CSS file with the ban.style.display. You have to use getComputedStyle() method.
window.getComputedStyle(ban, null).getPropertyValue("display");
But in your case I think it is better use a class based toggle maybe like,
CSS
.banner-content {
display: none;
height: 100px;
color: #fff;
background: #1b1b1b;
}
.banner-content.active {
display: block;
}
JS
function banne() {
var ban = document.getElementById("content");
ban.classList.toggle("active");
}
While style doesn't register the stylesheet properties, you can check if the style does not equal to "block" and then set it to block, otherwise none. Also see the difference between getComputedStyle and style: https://developer.mozilla.org/en/DOM/window.getComputedStyle
function banne() {
var ban = document.getElementById("content");
//consloe.log(ban.style.display === "none");
if (ban.style.display !== "block") {
ban.style.display = "block";
} else {
ban.style.display = "none";
}
}
.banner-content {
display: none;
height: 100px;
color: #fff;
background: #1b1b1b;
}
<button class="banner" onclick="banne()"> know </button>
<div class="banner-content" id="content">
Some Data
</div>
It's generally not a good idea to use inline event handlers.
Add a listener to the document. To toggle display, use a separate css class (.visible in the snippet) and toggle that. It makes your life so much easier.
document.addEventListener("click", banne);
function banne(evt) {
if (evt.target.classList.contains("banner")) {
document.querySelector("#content").classList.toggle("visible");
}
}
.banner-content {
display: none;
height: 100px;
color: #fff;
background: #1b1b1b;
}
.banner-content.visible {
display: block;
}
<button class="banner"> know </button>
<div class="banner-content" id="content">
Some Data
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
How can I make a for loop that creates a circle with a number inside.
For example 1 2 3 4, it always shows me 1.
Below my code
numberVariable: Array<any> = [0];
#ViewChild('numberVariables', {static: false}) numberVariables: ElementRef;
drawCircle(num) {
let count = "1";
let variables = this.numberVariables;
if (this.numberVariable.length === 0) {
this.numberVariable.push(1);
}
const span: any = this.renderer.createElement('span');
/*span.classList.add("lineCircle");*/
this.renderer.addClass(span, "lineCircle");
span.style.borderColor = "#2A86CA";
span.style.color = "#2A86CA";
let line = this.renderer.createText("__");
this.renderer.appendChild(variables.nativeElement, line);
this.renderer.appendChild(variables.nativeElement, span);
const spantwo: any = this.renderer.createElement('span');
spantwo.classList.add("numberCircle");
spantwo.style.borderColor = "#2A86CA";
spantwo.style.color = "#2A86CA";
let number = this.renderer.createText(count);
let linetwo = this.renderer.createText("__");
this.renderer.appendChild(variables.nativeElement, linetwo);
this.renderer.appendChild(variables.nativeElement, spantwo);
this.renderer.appendChild(spantwo, number);
}
Here is the output of this code
numberVariable: Array<any> = [0];
I start it at 0 because for that I do push 1, so I want it to go through and it shows every time I click on the sequence 1 2 3 4
my html file :
<div id="numberVariables" #numberVariables class="card p-3" (click)="drawCircle($event)">
<span class="numberCircle">
my css file:
#numberVariables {
display: inherit;
}
.numberCircle {
font: 20px Arial, sans-serif;
cursor: pointer;
width: 2em;
height: 2em;
box-sizing: initial;
background: #fff;
border: 0.1em solid #666;
color: #666;
text-align: center;
border-radius: 50%;
line-height: 2em;
box-sizing: content-box;
padding: 11px 16px;
}
.lineCircle {
font-size: 30px;
width: 2em;
color: #666;
position: relative;
top: -10px;
}
the result i want is this:
A bit hard to say without the rest of your code, but looks like you need to change:
let number = this.renderer.createText(count);
to:
let number = this.renderer.createText(num);
It's also worth mentioning that this is not the typical way of writing Angular components, ie heavy use of Renderer rather than template HTML and child components.
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 5 years ago.
Improve this question
I want to let the star colored when I click on it , but because I have both of Javascript and HTML file in separate folder , how can I revert the function in javascript to the html file?
Fiddle
HTML
<input type="hidden" name="rating" id="rating" />
<ul>
<li id="fav">★</li>
</ul>
Javascript
function addRating(obj) {
$('li').each(function(index) {
$(this).toggleClass('selected');
$('#rating').val((index+1));
if(index == $("li").index(obj)) {
return false;
}
});
}
$("#fav").click(function(){
addRating(obj);
});
Css
li{float:left; margin-left:9px;display: inline-block;color: #F0F0F0;text-shadow: 0 0 1px #666666;font-size:30px;}
.highlight, .selected {color:#F4B30A;text-shadow: 0 0 1px #F48F0A;}
Just pass this to the addRating it holds the context of the owner object.
function addRating(obj) {
$('li').each(function(index) {
$(this).toggleClass('selected');
$('#rating').val((index + 1));
if (index == $("li").index(obj)) {
return false;
}
});
}
$("#fav").on('click',function() {
addRating(this);
});
li {
float: left;
margin-left: 9px;
display: inline-block;
color: #F0F0F0;
text-shadow: 0 0 1px #666666;
font-size: 30px;
}
.highlight,
.selected {
color: #F4B30A;
text-shadow: 0 0 1px #F48F0A;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="rating" id="rating" />
<ul>
<li id="fav">★</li>
</ul>
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