We Keep Coding

Function not printing object properties correctly onto the HTML

Been trying all day to print an array of objects into the "cart" part of the HTML, but for the life of me I can't figure out what's wrong. The click event is working just fine, it either pushes the object into the array if it's not already there, or if it is, then it adds one to the count of "quantity" property. The issue is that, in order for the HTML to reflect these changes I have to refresh the whole page.
My guess is something not woring right with the storage, here's the initial setting of the "cart" part of the storage:
``if(localStorage.getItem("carrito")) {
productosEnCarrito = JSON.parse(localStorage.getItem("carrito"))
initCartHTML(productosEnCarrito)
}else{
productosEnCarrito = []
localStorage.setItem("carrito", productosEnCarrito)
}`
`
Here is everything involed in the printing and said array:
Event listener on the <button> tag:
`let agregarBtn = document.getElementById(`addCart${curso.clase}`)
agregarBtn.addEventListener("click", () => {
addCart(curso)
})`
the addCart() function:
`function addCart (curso) {
let cursoAgregado = productosEnCarrito.find((elem)=> elem.clase == curso.clase)
if(cursoAgregado == undefined) {
productosEnCarrito.push(curso)
localStorage.setItem("carrito", JSON.stringify(productosEnCarrito))
cartHTML(curso)
} else {
cursoAgregado.quantity++
localStorage.setItem("carrito", JSON.stringify(productosEnCarrito))
cartHTML(curso)
}
console.log(productosEnCarrito)
itemsInCart.innerText = productosEnCarrito.length
}`
the primary printing function (this is the bit not working)
`function cartHTML (curso) {
let cursoAgregado = productosEnCarrito.find((elem)=> elem.clase == curso.clase)
let newCurso = document.createElement("ul")
if (cursoAgregado == undefined) {
newCurso.className = "nav nav-tabs d-flex justify-content-between flex-nowrap"
newCurso.innerHTML =
`<li class="nav-item m-2">${curso.id}</li>
<li class="nav-item m-2">${curso.duration}</li>
<li class="nav-item m-2">€${curso.price}</li>
<li class="nav-item m-2">x${curso.quantity}</li>`
cartList.appendChild(newCurso)
} else {
newCurso.innerHTML =
`<li class="nav-item m-2">${curso.id}</li>
<li class="nav-item m-2">${curso.duration}</li>
<li class="nav-item m-2">€${curso.price}</li>
<li class="nav-item m-2">x${curso.quantity}</li>`
}
}`
I also set another function to retreive the storage and printing it when refreshing, this might have something to do with it, idk:
`function initCartHTML (array) {
for (let curso of array) {
let newCurso = document.createElement("ul") // <-- linea modificada
newCurso.className = "nav nav-tabs d-flex justify-content-between flex-nowrap"
newCurso.innerHTML =
`<li class="nav-item m-2">${curso.id}</li>
<li class="nav-item m-2">${curso.duration}</li>
<li class="nav-item m-2">€${curso.price}</li>
<li class="nav-item m-2">x${curso.quantity}</li>`
cartList.appendChild(newCurso)
}
itemsInCart.innerText = productosEnCarrito.length
}`
I'm trying to get the cart part of the html to reflect the changes immediately after it's modified, but it only does so after refreshing.

JS innerHTML not displaying

I'm trying to create a dynamic navbar that is different when a user is signed in vs. not signed in.
I have the auth portion working (confirmed with console logs); however, for some reason, the HTML is not getting updated when I use .innerHTML = .... I'm console logging the innerHTML after I update it, and it appears correct in the log but the navbar isn't displaying like it should.
HTML:
...
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li><strong>Home</strong></li>
<li id ="nav-listings">
<strong>Listings</strong>
</li>
<li><strong>Contact</strong></li>
<li class="has-children" id="nav-account">
<strong>Sign-In</strong>
<div id="navDropdown" class="dropdown">
Profile
Sign-Up
</div>
</li>
</ul>
...
js code:
AOS.init({
duration: 800,
easing: 'slide',
once: true
});
jQuery(document).ready(function($) {
"use strict";
$(".loader").delay(1000).fadeOut("slow");
$("#overlayer").delay(1000).fadeOut("slow");
...
firebase.auth().onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
var username = firebaseUser.email;
console.log(`${firebaseUser ? `- User signed in: ${firebaseUser.email} => ${username}` : "No User Signed in"}`);
document.getElementById("nav-listings").className = "has-children";
document.getElementById("nav-listings").innerHTML = "<a href='Search.html' class='nav-link'><strong>Listings</strong></a>" +
"<div id='listDropdown' class='dropdown'>" +
"<a href='AddHouse.html'>Add Listing</a>" +
"<a href='User.html'>Favorites</a>" +
"</div>";
console.log(document.getElementById("nav-listings").innerHTML);
} else {
btnLogin.disabled = false;
}
});
});
EDIT:
It is appearing in the condensed form of the navbar but the main navbar???
See Here for the full code (minus the CSS... which makes the problem hard to see but all the js and HTML are there).

This should work
HTML:
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li><strong>Home</strong></li>
<li id="nav-listings">
<strong>Listings</strong>
</li>
<li><strong>Contact</strong></li>
<li class="has-children" id="nav-account">
<strong>Sign-In</strong>
<div id="navDropdown" class="dropdown">
Profile
Sign-Up
</div>
</li>
</ul>
JavaScript:
firebase.auth().onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
var username = firebaseUser.email;
console.log(`${firebaseUser ? `- User signed in: ${firebaseUser.email} => ${username}` : "No User Signed in"}`); ;
$("#nav-listings").addClass('has-children').html("<a href='Search.html' class='nav-link'><strong>Listings</strong></a><div id='listDropdown' class='dropdown'><a href='AddHouse.html'>Add Listing</a><a href='User.html'>Favorites</a></div>")
console.log($("#nav-listings").html());
} else {
btnLogin.disabled = false;
}
});

When you are setting the innerHTML you are also setting the class for nav-listings to has-children. This removes the existing class of nav-link.
Do you mean to do this? If you want to keep the nav-link class as well then instead of
document.getElementById("nav-listings").className = "has-children";
put a space before the has-children and add the string to the classname. This will then add has-children to the class and wont remove the nav-link.
document.getElementById("nav-listings").className += " has-children";
If you console.log the outerHTML instead of innerHTML you can check whether both nav-link and has-children are there.

Using an active 'li' element to determine a video's source file

I tried creating a small video library where one div is split into two parts: 1) a menu on the left with the titles of the movies and 2) the rest of the div on the right being a video window that changes it's video source according to the selected title on the menu. I gave the li elements that housed the titles id's and used jQuery/JavaScript to retrieve the title and to assign a new video source based on that title, but it isn't working and I also can't claim to completely understand what I've done. The code is as follows:
HTML
<div class="miyazaki">
<div class="menu">
<ul>
<li><a id="Gulliver">Gulliver's Travels</a></li>
<li><a id="Howl">Howl's Moving Castle</a></li>
<li><a id="Kiki">Kiki's Delivery Service</a></li>
<li><a id="Castle">Castle of Cagoliostro</a></li>
<li><a id="Totoro">"My Neighbor Totoro</a></li>
<li><a id="Ponyo">Ponyo</a></li>
<li><a id="Mononoke">"Princess Mononoke</a></li>
<li><a id="Spirited">Spirited Away</a></li>
<li><a id="Sky">The Sky's Castle Laputa</a></li>
<li><a id="Nausicaa">Nausicaa Valley of the Wind</a></li>
<li><a id="Cat">"The Cat Returns</a></li>
</ul>
</div>
</div>
JavaScript
function Hayato() {
var movie = $("ul.menu li a.active");
if (movie.id == Gulliver || movie.id == null || movie.id == "") {
document.getElementsByClassName('window').video.source.src = Gulliver.mkv
}
else if (movie.id == Howl) {
document.getElementsByClassName('window').video.source.src = Howl.mkv
}
else if (movie.id == Kiki) {
document.getElementsByClassName('window').video.source.src = Kiki.mkv
}
else if (movie.id == Castle) {
document.getElementsByClassName('window').video.source.src = Castle.mkv
}
else if (movie.id == Totoro) {
document.getElementsByClassName('window').video.source.src = Totoro.mkv
}
else if (movie.id == Ponyo) {
document.getElementsByClassName('window').video.source.src = Ponyo.mkv
}
else if (movie.id == Mononoke) {
document.getElementsByClassName('window').video.source.src = Mononoke.mkv
}
else if (movie.id == Spirited) {
document.getElementsByClassName('window').video.source.src = Spirited.mkv
}
else if (movie.id == Sky) {
document.getElementsByClassName('window').video.source.src = Sky.mkv
}
else if (movie.id == Nausicaa) {
document.getElementsByClassName('window').video.source.src = Nausicaa.mkv
}
else (movie.id == Cat) {
document.getElementsByClassName('window').video.source.src = Cat.mkv
}
}
I'm not entirely sure this code is the best way to go about solving my problem, but it's the most logical progression I can think of.

This can all be condensed down considerably since most of the code stays the same in all cases. Also, your closing <ul> isn't a close tag and you are missing a closing <div>.
// Get all the <a> elements
var anchors = document.querySelectorAll(".menu a");
// Get a reference to the video element
var v = document.querySelector("video");
// Set up click event handlers for each
Array.prototype.slice.call(anchors).forEach(function(anchor){
anchor.addEventListener("click", function(evt){
// default video when no id is present
var d = "Gulliver.mkv";
// Use the default or the id
v.source = (!anchor.id) ? d : anchor.id + ".mkv";
console.log("video source is: " + v.source);
});
});
<div class="miyazaki">
<div class="menu">
<ul>
<li><a id="Gulliver">Gulliver's Travels</a></li>
<li><a id="Howl">Howl's Moving Castle</a></li>
<li><a id="Kiki">Kiki's Delivery Service</a></li>
<li><a id="Castle">Castle of Cagoliostro</a></li>
<li><a id="Totoro">"My Neighbor Totoro</a></li>
<li><a id="Ponyo">Ponyo</a></li>
<li><a>Porco Rosso</a></li>
<li><a id="Mononoke">"Princess Mononoke</a></li>
<li><a id="Spirited">Spirited Away</a></li>
<li><a id="Sky">The Sky's Castle Laputa</a></li>
<li><a id="Nausicaa">Nausicaa Valley of the Wind</a></li>
<li><a id="Cat">"The Cat Returns</a></li>
</ul>
</div>
</div>
<video></video>

As you also tagged jQuery here a working example for that:
$('.menu li a').on('click', function() {
var id = $(this).attr('id');
$('.window video source').attr('src', id + '.mkv');
});
Example
Note: Your html is invalid too. The ul is never closed

There's no need to use all these if blocks, you can do it in a one line statement.
You could just do it this way:
function Hayato() {
var movie = $("ul.menu li a.active").attr("id");
if(movie && movie !== "#")
document.getElementsByClassName('window')[0].video.source.src = movie + ".mkv";
}
Note:
In the code you used all the Strings are inavlid Strings, you should wrap them between two " or '.

How do I toggle play/pause with SoundJS?

Im using SoundJS to build a psuedo MPC. I have the sound kit buttons programmed the way I want, but I cannot get the loops to work the way I want.
I would like the user to click on "loop1" and it plays.
If the user clicks "loop1" again, it should stop and resets.
If the user clicks "loop2" while "loop1" is playing, then "loop1" stops and resets while "loop2" starts to play.
How could I master this problem. Warning, I'm a UI/UX designer at heart and still learning Javascript, so if you could give me a bit more detail when explaining, that would be great. Thanks!
Here's some of my code below, but to see it in action, check here: http://nowthatsgenius.com/clients/beatbox/
<body onload="init();">
<section class="player-container">
<article class="player-controls">
<ul class="player-controls">
<li class="player-controls-button" id="loop1" onclick="playSound(this)">Loop 1</li>
<li class="player-controls-button" id="loop2" onclick="playSound(this)">Loop 2</li>
</ul>
</article>
</section>
<section class="mpc-container">
<article class="mpc-title mpc-col">
<span class="text">V1</span>
</article>
<article class="mpc-controls mpc-col">
<ul class="mpc-controls-wrap">
<li class="mpc-controls-row">
<ul>
<li class="mpc-controls-button" id="a1" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a2" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a3" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a4" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a5" onclick="playSound(this)"></li>
</ul>
<ul>
<li class="mpc-controls-button" id="a6" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a7" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a8" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a9" onclick="playSound(this)"></li>
<li class="mpc-controls-button" id="a10" onclick="playSound(this)"></li>
</ul>
</li>
</ul>
</article>
</section>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.6.0.min.js"></script>
<script>
var preload;
function init() {
if (!createjs.Sound.initializeDefaultPlugins()) {
document.getElementById("error").style.display = "block";
document.getElementById("content").style.display = "none";
return;
}
var assetsPath = "assets/";
var sounds = [
{id:"loop1", src:"loop1.mp3"},
{id:"loop2", src:"loop2.mp3"},
{id:"a1", src:"snare.wav"},
{id:"a2", src:"kick1.wav"},
{id:"a3", src:"clap1.wav"},
{id:"a4", src:"closedhat.wav"},
{id:"a5", src:"cymbal.wav"},
{id:"a6", src:"kick2.wav"},
{id:"a7", src:"clap2.wav"},
{id:"a8", src:"openhat.wav"},
{id:"a9", src:"voice1.wav"},
{id:"a10", src:"voice2.wav"},
];
$('.player-controls-button').attr("disabled",true);
createjs.Sound.alternateExtensions = ["mp3"];
createjs.Sound.addEventListener("fileload", createjs.proxy(handleLoadComplete, this));
createjs.Sound.registerSounds(sounds, assetsPath);
}
function playSound(target) {
var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
$(".player-controls-button").click(function(event) {
if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
instance.stop();
}
else {
instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
});
console.log(instance.playState);
}
</script>
</body>

You can modify sounds after you've started playing them by assigning them to a variable. In this case, I've created variables loop1 and loop2.
// Creating variables outside playSound() so they exist in the global scope.
var loop1 = null;
var loop2 = null;
function playSound(target) {
if(loop1){ // If loop1 exists, stop it.
loop1.stop();
}
if(loop2){ // If loop2 exists, stop it.
loop2.stop();
}
if(target.id == "loop1"){
// Assign value to var loop1
loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
else if(target.id == "loop2"){
// Assign value to var loop2
loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
else{
// Otherwise, create generic sound
var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
$(".player-controls-button").click(function(event) {
if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
instance.stop();
}else {
instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
});
console.log(instance.playState);
}
I recommend you separate your playSound(target) function for sound effects, and create a new one named playLoop(target) for your music loops, just to make it easier to read. But that's up to you.
Version 2
var loop1 = null;
var loop2 = null;
function playLoop(target){
// If loop1 exists, stop it and delete it
if(loop1){
loop1.stop();
loop1 = null;
}else if(target.id == "loop1"){
loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
// If loop2 exists, stop it and delete it
if(loop2){
loop2.stop();
loop2 = null;
}else if(target.id == "loop2"){
loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
}
}
When you assign createjs.Sound.play() to a variable, the variable becomes an AbstractSoundInstance object. You can modify it in many cool ways, here's the documentation if you want to learn what more you can do with these variables.

Jquery click function trigger load more button

below i have 3 links as an tabs:
<li data-tab-id="self" class="tab selected">Near You<span class="unread-count hidden" style="display: none;"></span></li>
<li data-tab-id="friends" class="tab">Following<span class="unread-count hidden" style="display: none;"></span></li>
<li data-tab-id="user" class="tab">Your Activity<span class="unread-count hidden" style="display: none;"></span></li>
when i click the above link Jquery click function are triggered
$(".hd-ui-activity li a").click(function(e) {
e.preventDefault();
var tabid = $(this).parent().attr('data-tab-id');
if(tabid == "self"){
getFunc1(totalRecords);
} else if(tabid == "friends") {
getFunc2(totalFriendsRecords);
} else if(tabid == "user") {
getFunc3(totalUserRecords);
}
});
When each of the links/tabs are clicked the function eg getFunc1() are called which append an html to the following div (Each func have its own div)
<li data-section-id="following" data-component-bound="true">
<ul class="module-list">
<!-- USER ACTIVITY JSON -->
</ul>
<a class="ybtn ybtn-primary ybtn-large more-wishlist" href="#" onclick="javascript:getRecentActivityFriends(event)">
<span data-component-bound="true" class="loading-msg following">See more recent activity</span>
</a>
</li>
Only 4 list results are displayed on the div, when user click see more activity button, more result are loaded into div. The problems now is when the page load it display correctly 4 results but when i click the link again rather than a button all the data are displayed.Its difficult for me to navigate between tabs. How can i avoid this?
Update:
var totalFriendsRecords = '<?=$this->followingTotal?>';
function getRecentActivityFriends(event)
{
if (event != null){
disabledEventPreventDefault(event);
}
getFriendsActivity(totalFriendsRecords);
}
home.js
var totalFriendsRecordsView = 0;
function getFriendsActivity(totalFriendsRecords)
{
var activityHtml = ''
$.ajax({
url:baseUrl + "activity/feedfollowing",
data:{'total':totalFriendsRecordsView},
dataType:"json",
type:"POST",
success:function(data){
for(var i=0; i<data.length; i++){
activityHtml = '<p>'+data[i][name]+'</p>';
}
$('#activity-feed li[data-section-id=following] .module-list').append(activityHtml);
if( totalFriendsRecords <= totalFriendsRecordsView){
$('.following').text('Nothing beyond here ...');
$('.following').removeAttr('onclick');
$('.following').removeAttr('href');
}
}
});
}