Develop Reference

Pop up window, or separate screen n Js

I am making a clicker game, it is very simple, and mostly just a learning process, for me to learn JavaScript. I have added a "Shop" button, attempting to have a separate screen, or a popup, to make a Shop place, where the player can shop for power-ups, using their "clicks" to purchase them, then they can close out the shop, and continue with their game.
This is what i tried:
I already had this variable set:
...
shopMenu = false;
...
This is everything else:
// Shop Button
if (mouse.dist(shop) < 40) {
shopColor = "firebrick";
shopMenu = true;
if (shopMenu == true) {
// This area is what I need help on, I don't know how to make a separate screen, to pop up, for a "shop".
}

You can have a shop div element in your html like
<div id="shop">
<p>Welcome to the shop</p>
</div>
and in your styling, have it hidden by default
#shop {
display: none;
}
Then back in your javascript,
if(shopMenu === true) {
const shopElement = document.getElementById('shop');
shopElement.style.display = 'block'
}

Html button colour change on click

hopefully this is a pretty easy one, I am building a web app using flask and python. On the front end of the app I am trying to get it to change the colour of the button pressed and revert any previous colour changes to other buttons so only the most recently selected button is a different colour.
The buttons are populated from an sql database so all use the same html line in a for loop. Below is the code I have currently:
Colour change script:
<script>
var count = 0;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "red"
count = 0;
}
else {
count = 1;
}
}
Button code:
{% for item in categorydata %}
<tr>
<button id="{{item[0]}}" formtarget="Items" name="ItemCategory" value={{item[0]}} onClick="setColor('{{item[0]}}', '#101010')" style="color:black;height:50px;width:150px" >{{item[0]}}</button>
</tr>
{% endfor %}
Any ideas on how I can do this?

for this kind of problem you don't need to use JS.
you have to do is use css :focus psuedo-class
for ex:
.btn:focus {
background-color: red;
}

So one way of doing this would be to add a class "modified" to the button pressed and remove class "modified" from the previously pressed button
CSS
modified {
background-color: black;
}
Javascript
function calledOnClick(id){
previousPressedButton = document.getElementsByClassName("modified")[0]; //there should only be one item, check before hand if items exist ofcourse.
previousPressedButton.classList.remove("modified")
pressedButton = document.getElementById(id)
pressedButton.classList.add("modified")
}
HTML
<button id=1 onclick="calledOnClick(this.id)"></button>

Link two elements, store them, and send them to remove function - Pure Javascript

I have a little Pure Javascript prototype demonstrating shopping cart functionality.
I have a Button which adds the item to the cart (and toggles to an ON state) and then a Card which represents the item in the shopping cart.
So far I have worked;
Attach data to Add to Cart Button ✓
Send data from Button to Shopping Cart and create new Item Card ✓
However, I cannot work out how to link Button and newly created Item Card so I can:
Remove Item Card and toggle button OFF or
Toggle button OFF and remove the correct Item Card
https://codepen.io/rhysyg03/pen/PdyyWE
Your help would be much appreciated.
FYI - this is just for a demo so it doesn't need to be production ready code.
Thank you.
const shoppingCartEl = document.querySelector('#js-shopping-cart');
const addToCartButton = document.querySelector('#js-add-to-cart');
var buttonToggle = false;
var itemOneData = {
name:'Shoes',
price:"$105.00"
}
function addItem(button, itemData) {
console.log("ADD");
// var itemEl = createElement('<div class="item-card"></div>');
const itemEl = document.createElement("div");
itemEl.classList.add("item-card");
itemEl.innerHTML = itemData.name + itemData.price + "<button id='js-item-cart-remove'>Remove</button>";
shoppingCartEl.appendChild(itemEl);
const itemCardRemove = document.querySelector('#js-item-cart-remove');
itemCardRemove.addEventListener('click', () => {
removeItem();
})
}
function removeItem() {
console.log("REMOVE");
// how to do this part
}
addToCartButton.addEventListener('click', () => {
if (buttonToggle == false) {
addItem(addToCartButton, itemOneData);
buttonToggle = true;
addToCartButton.innerHTML = "Remove from Cart";
} else {
// How to do this part
removeItem();
buttonToggle = false;
addToCartButton.innerHTML = "Add to Cart";
}
})

(I am sorry I am tired a bit, you should read the very ending, firstly)
You should have items like this:
var itemOneData = {
id: 1,
name:'Shoes',
price:"$105.00"
}
var itemTwoData = {
id: 2,
name:'Shoes',
price:"$105.00"
}
Then you should store identifier on the item card element:
...
itemEl.classList.add("item-card");
itemEl.setAttribute("data-item-id", itemData.id)
...
After this, when clicking on remove button, you should:
Get the id of item to be removed itemEl.getAttribute("data-item-id")
Pass the id to remove function removeItem(id)
(this was where I've given up) Find the item with the attribute "data-item-id" having value of the id and replace it to empty string ""
There is another solution, probably far less complex: when clicking on remove button simply find it's parent and replace it with empty string.

This is a quick solution, just to get what you are looking for, but of course, maybe you should be having some 'state' where you have your cart items, and render the UI based on that state. In this quick solution, what I am doing is event delegation, as we know that the one element that will exist at the beginning is the cart div. So we place the event on this element and then check which element are we clicking, and also doing some check so we assure only that an item-card can be deleted. codepen.io/anon/pen/WgaYxe?editors=1011
Hope this helps and if you need more details please feel free to ask!
Bye

Make div appear or disappear with javascript

I am attempting to make a few divs behave the way I want them to. Here is my relevant HTML:
<ul class="services">
<li class="business-formation" id="services-li-1">Business Formation</li>
<li class="domestic-relations" id="services-li-2">Domestic Relations</li>
<li class="estate-probate" id="services-li-3">Estate & Probate</li>
</ul>
<div class="business-formation-list" id="business-formation-list">
<ul>
<li>Items go here</li>
</ul>
</div>
<div class="domestic-relations-list" id="domestic-relations-list">
<ul>
<li>Items go here</li>
</ul>
</div>
<div class="estate-probate-list" id="estate-probate-list">
<ul>
<li>Items go here</i>
</ul>
</div>
I want the divs to appear and disappear when the corresponding li is clicked (they are links). Here is my Javascript:
document.getElementById('services-li-1').style.cursor = "pointer";
document.getElementById('services-li-2').style.cursor = "pointer";
document.getElementById('services-li-3').style.cursor = "pointer";
const div1 = document.querySelector('business-formation-list');
const div2 = document.querySelector('domestic-relations-list');
const div3 = document.querySelector('estate-probate-list');
const click2 = document.getElementById('services-li-2');
document.addEventListener('click', (event) => {
if (event.click2.className = 'domestic-relations') {
div1.style.display = 'none';
div2.style.display = 'block';
div3.style.display = 'none';
}
});
This doesn't make anything happen, but what I wanted it to do is to make the second div appear when the li with the class name "domestic-relations" is clicked. What am I doing wrong? Thanks!

If you're using querySelector, you need to tell it that it's a class. You do that by adding . before the class in question.
So document.querySelector('business-formation-list') should be document.querySelector('.business-formation-list').
However, if you're only using it once, it should be an ID, not a class.

Im also fairly new to this and had a similar problem to yours. I came up with a solution, so it might help you as well. The solution is quite long so I hope you can bear with me.
first thing is to change your your div class "domestic/estate/business" to just "list". When you're doing the css for it, you'll want to apply the same style to them. If you need more styling, you can always target the IDs or add another css class.
Once you've done that, apply to that list "display: none;". This will hide all your ul's at once.
The javascript looks something like this. i've added some description as to why I chose to do what I did.
var serviceType = document.querySelectorAll(".serviceType");
var serviceTypeArray = Array.prototype.slice.call(serviceType); // this will
//change your serviceType from a nodelist to an Array.
var serviceDescription = document.querySelectorAll(".list"); // to grab the
//list of descriptions and make it into an "array"
for ( i = 0 ; i < serviceTypeArray.length ; i++) {
var services = serviceTypeArray[i]; // I created this variable to store the
// variable "i"
services.addEventListener( "click" , displayServices); }
// created this "for loop" to loop through every element inside the array
//and give it the "click" function
function displayServices() {
var servicePosition = serviceTypeArray.indexOf(this); // when we click the
// event, "this" will grab the position of the clicked item in the array
if (serviceTypeArray[servicePosition].hasAttribute("id") == false) { //
// the hasAttribute returns values of true/false, since initially the
// serviceTypeArray didn't have the "id" , it returns as false
serviceTypeArray[servicePosition].setAttribute( "id" , "hide"); // I've
// added the "setAttribute" function as a unique indicator to allow
// javascript to easily hide and show based on what we are clicking
serviceDescription[servicePosition].style.display = "block"; // When you
//click one of the serviceType, it returns an the index number (aka the
// position it is inside the arrayList)
//this gets stored inside servicePosition(aka the actual number gets
// stored).
// Since i've made an array to store the the description of each service,
// their position in the array correspond with the service's position
//inside the serviceType array made earlier; therefore, when I press one
// particular serviceType (ie i clicked on "business formation"), the
// appropriate text will pop up because the position of both the name and
// its description are in the same position in both arrays made
} else if (serviceTypeArray[servicePosition].hasAttribute("id") == true ) {
//since the serviceType now has an attribute, when we check it, it'll come
// back as true
serviceTypeArray[servicePosition].removeAttribute("id"); //we want to
// remove the id so next time we click the name again, the first "if"
// condition is checked
serviceDescription[servicePosition].style.display = "none"; //this is
// so that the display goes back to "none"
}
}
This will allow to click any of the names and display/hide them at will. you can even show 2/3 or all three of them, it's up to you. I hope this helps and I hope the explanation is clear enough!
Let me know if you have any questions for this!

Show and Hide 1 row of elements with JavaScript and Bootstrap

I am making a new website. As is what I'm doing is a gallery of videos by clicking shows me a video in modal, in total only shows me 1 large video with text and small 3 videos below where you can display more items. I need you to click show me more out a new row with 3 computer elements by al-md-4 columns. This step I have done but I have 2 problems:
Default with Javascript shows me 2 rows instead of just one, will define in the JS 1 and showing me appear 2
I also wish there was another button to "hide" and was hiding whenever I click a row.
Then I attached the complete code to where I could do.
http://www.bootply.com/vLeA1VQoYF
Need help!!
Thank you so much! Greetings from Spain

Here is my fiddle
And JS:
$('.mydata:gt(0)').hide().last().after(
$('<a />').attr('href','#').attr('id','btn_less').text('Show less').click(function(){
var a = this;
$('.mydata:visible:gt(0)').last().fadeOut(function(){
if ($('.mydata:visible:gt(0)').length == 0) {
$(a).hide();
} else if($("#btn_more:not(:visible)")){
$("#btn_more").show();
}
});
return false;
})
).after($('<span />').text(' ')
).after(
$('<a />').attr('href','#').attr('id','btn_more').text('Show more').click(function(){
var a = this;
$('.mydata:not(:visible):lt(1)').fadeIn(function(){
if ($('.mydata:not(:visible)').length == 0) {
$(a).hide();
} else if($("#btn_less:not(:visible)")){
$("#btn_less").show();
}
}); return false;
}));
Tell me if I misunderstood you and you need something else.