We Keep Coding

How can I define if a product is in a basket?

Tell me please, how can I do it for web-site on HTML CSS Javascript. If product is not in a shopping cart,
then show a text "Your cart is Empty." If the product is in the shopping cart, hide the text "Your cart is Empty.".
In Html there are several buttons with class .buttons on which the user clicks and adds products to the cart.
There are also added products in the shopping cart with class .basket__item. Buttons to delete items in cart with class .delete.
Lastly, the text with class .text_Empty_cart.
I was trying to do it through arrays and nothing happened. I tried through NodeList collections, but vainly.
function Cart_check() {
const btns_array = [...document.querySelectorAll(".buttons")];
const cart_Items_array = [...document.querySelectorAll(".basket__item")];
var text_Empty_cart = document.querySelector(".text_Empty_cart");
for (var i = 0; i < btns_array.length; i++) {
btns_array.addEventListener("click", () => {
for (var j = 0; j < cart_Items_array.length; i++) {
if (cart_Items_array[j] > 0) {
text_Empty_cart.style.display = "none";
} else {
text_Empty_cart.style.display = "block";
}
}
});
}
}
Cart_check();
Above one of my efforts. I'll be glad for any help!

First of all, maybe you should use j++.
for (var j = 0; j < cart_Items_array.length; i++) {
Second, it looks the script will reset the visibility. Maybe you should:
boolean hasItem = false;
for (var j = 0; j < cart_Items_array.length; j++) {
if (cart_Items_array[j] > 0) {
hasItem = true;
break;
}
}
if(hasItem)
text_Empty_cart.style.display = "none";
else
text_Empty_cart.style.display = "block";

You have not shared your HTML, so, for the moment we can only guess.
Below I out together a working snippet that will make the .empty__basket div disappear as soon as there are elements in the cart:
var i=0;
document.body.addEventListener("click",ev=>{
const el=ev.target;
if (!el.classList.contains("buttons")) return;
const btxt=el.textContent;
if(btxt=="add item"){
cart.insertAdjacentHTML("beforeend",
`<div class="basket__item">this is item ${++i} ... <button class="buttons">delete</button>`);
}
else if (btxt=="delete"){
el.closest("div").remove();
}
Cart_check();
});
const text_Empty_cart = document.querySelector(".text_Empty_cart"),
cart=document.querySelector("#cart");
function Cart_check() {
text_Empty_cart.style.display=document.querySelector(".basket__item")?"none":"";
}
Cart_check();
<button class="buttons">add item</button>
<div id="cart"></div>
<div class="text_Empty_cart">Your cart is currently empty.</div>
The Cart_check() function now becomes almost trivial: It simply checks for an existence of a .basket__item element and sets the visibility of the .text_Empty_cart element accordingly.

Div not showing when onClick Function runs

I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo

Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}

Reexamination of "remove selected items from google form dropdown list"

This clever solution:
remove selected items from google form dropdown list
Removes selected items from google form dropdown list based off of an inventory stored in sheets. The problem is, when I run it I get a "Cannot call method "createChoice" of undefined. (line 39, file "Code")". After thoroughly examining the code, it still seems to me that it should work... Any ideas as to how to fix it?
var LIST_DATA = [{title:"Select a Time", sheet:"Doc Appointments"}];
function updateLists() {
//var form = FormApp.getActiveForm();
var form = FormApp.openById("1fTlfq1ciD2C7iLL7Pw43ld-EyfxxM6GYOF-SdoAkTvw");
var items = form.getItems();
for (var i = 0; i < items.length; i += 1){
for (var j = 0; j < LIST_DATA.length; j+=1) {
var item = items[i];
if (item.getTitle() === LIST_DATA[0].title){
updateListChoices(item.asMultipleChoiceItem(), LIST_DATA[0].sheet);
break;
}
}
}
}
function updateListChoices(item, sheetName){
var inventory = (SpreadsheetApp.openById("1tUpcx4CPu3oMc-A1kMOuE7R3OcfeCPHkHXSpEoam4Xw")
.getSheetByName("Doc Appointments")
.getDataRange()
.getValues());
Logger.log(inventory);
var selected = (SpreadsheetApp.openById("1tUpcx4CPu3oMc-A1kMOuE7R3OcfeCPHkHXSpEoam4Xw")
.getSheetByName("responses")
.getDataRange()
.getValues());
Logger.log(selected);
var choices = [];
var selectedReal = [];
for (var i = 0; i< selected.length; i+=1){
selectedReal.push(selected[i][1])
}
for (var i = 1; i< inventory.length; i+=1){
if(selectedReal.indexOf(inventory[i][0])=== -1){
choices.push(item.createChoice(inventory[i][0]));}
}
if (choices.length < 1) {
var form = FormApp.getActiveForm();
form.setAcceptingResponses(false);
} else {
item.setChoices(choices);
}
}

for loop with if else not working Javascript

I'm trying to make a list where users can insert their favourite beer. there have to be a check if the "userinput" is already in the array..
My thoughts were as follows: loop through the beersArray and check if there is a value in the array that is the same as what user puts in. If there is, alert and do not add. If not, then add the user input to a list item.
var submitBier = document.getElementById("submitbeer");
submitBier.addEventListener("click", function(){
event.preventDefault();
var beersArray = [];
var beer = document.getElementById("favobeer");
var beerList = document.getElementById("listwithbeer");
var beerLi = document.createElement("LI");
var BeerName = document.createTextNode(beer.value);
var i;
var j;
for (j = 0; j < beersArray.length; j++) {
if (beersArray[j] === beer.value) {
alert("This beer is already in the list");
} else {
for (i = 0; i < beersArray.length; i++) {
beersArray[i].className = 'beer';
beerLi.appendChild(BeerName);
beerList.appendChild(beerLi);
beersArray.push(beerList.appendChild(beerLi));
}
}
}
});
<div class="beers">
<h1 id="vraagnaam">add your favourite beers</h1>
<input type="text" id="favobeer" value = "" />
<button id="submitbeer" type="submit" value="Submit" >add</button>
<ul id="listwithbeer"></ul>
</div>

There are multiple problems in the code
The array should be declared outside of the handler else every click will create a new handler
The array should be populated with the input value, not with the value returned by appendChild()
You can use indexOf to check whether the current value is present in the array
So
var beersArray = [];
var submitBier = document.getElementById("submitbeer");
var beer = document.getElementById("favobeer");
var beerList = document.getElementById("listwithbeer");
submitBier.addEventListener("click", function() {
event.preventDefault();
var value = beer.value.trim();
if (beersArray.indexOf(value) == -1) {
var beerLi = document.createElement("LI");
var BeerName = document.createTextNode(value);
beerLi.appendChild(BeerName);
beerList.appendChild(beerLi);
beersArray.push(value);
} else {
alert("This beer is already in the list");
}
});
<div class="beers">
<h1 id="vraagnaam">add your favourite beers</h1>
<input type="text" id="favobeer" value="" />
<button id="submitbeer" type="submit" value="Submit">add</button>
<ul id="listwithbeer"></ul>
</div>

A 2nd for loop won't be necessary if you are looping through the same array.
The correct way to putting in a 'if-else' statement within a for loop can be done as follows:
for (var j = 0; j < beersArray.length; j++) {
// A If-conditional statement to short-circuit existing beer list
if (beersArray[j] === beer.value) alert ('This beer is already in the list')
// Core Logic
beersArray[j].className = 'beer';
beerLi.appendChild(BeerName);
beerList.appendChild(beerLi);
beersArray.push(beerList.appendChild(beerLi));
}

Filtering elements out of a html list using javascript

So I have a list of items and a text box, and I want to apply the hidden attribute to the items not matching what is in the text box. I am using javascript to do this on the browser in real time. Here is my HTML (don't worry abou the g:textbox, i'm doing this in grails)
Filter List :<g:textBox id = filter onkeyup = Javascript:filter()>
<ul id = 'terms'>
<li id = 'AFUE'>AFUE
<p> Annualized Fuel Utilization Efficiency is a measure of your furnace’s heating efficiency. The higher the AFUE percentage, the more efficient the furnace. The minimum percentage established by the DOE for furnaces is 78.</p>
</li>
<li id = 'Airflow'>Airflow
<p> The distribution or movement of air. </p>
</li>
<li id = 'Air Handler/Coil Blower'>Air Handler/Coil Blower
<p> The indoor part of an air conditioner or heat pump that moves cooled or heated air throughout the ductwork of your home. An air handler is usually a furnace or a blower coil.</p>
</li>
<li id = 'Bioaerosols'>Bioaerosols
<p>Microscopic living organisms that grow and multiply in warm, humid places.</p>
</li>
</ul>
So i have the html setup, now I need to write the javascript.
1. I'm not sure if i'm using the filter.text correctly and
2. not sure how to get to the li ids inside the ul id
function filter(){
// on each li item in ul where ul id = 'terms'
{
if //li item id.match(${filter.text})
{
//li item.hidden = "false"
}
else if !//li item id.match(${filter.text})
{
//li item.hidden = "true"
}
else if ${filter.text} = ""
{
//set all items hidden = "false"
}
}
}
I want to say I need to iterate over a collection of elements, but that just may be the ruby/cucumber coming out of me

var filterText = document.getElementById('filter').value,
lis = document.querySelectorAll('#terms li'),
x;
for (x = 0; x < lis.length; x++) {
if (filterText === '' || lis[x].innerHTML.indexOf(filterText) > -1) {
lis[x].removeAttribute('hidden');
}
else {
lis[x].setAttribute('hidden', true);
}
}
http://jsfiddle.net/ExplosionPIlls/bWRkz/

Here's a way to search the <li> id values in plain javascript:
function keyTyped(e) {
var items = document.getElementById("terms").getElementsByTagName("li");
var matches = [];
var typed = e.target.value;
var text, i;
for (i = 0; i < items.length; i++) {
text = items[i].id;
if (!typed || text.indexOf(typed) != -1) {
matches.push(items[i]);
}
}
// now hide all li tags and show all matches
for (i = 0; i < items.length; i++) {
items[i].style.display = "none";
}
// now show all matches
for (i = 0; i < matches.length; i++) {
matches[i].style.display = "";
}
}
Demo: http://jsfiddle.net/jfriend00/wFEJ5/
This demo actually hides the elements so you can see them visually in the demo. You can obviously change the code to add/remove the hidden attribute if that's the end result you eventually want.