Develop Reference

hide remove button <span> and remove <li> on click JavaScript

I would like to display the title of a task when onclick, it gives me "remove" text(span) as well. I tried to display my task without remove when a user clicks on each list... but it wont work..
I also want to remove each list when a user clicks on the remove button.. Can you give me some tips? I have tried multiple ways.. but it wont work :(
I have attached the image of my to do list app.
I appreciate it in advance!
var title = document.getElementById('title');
var list = document.getElementById('list');
var li = list.getElementsByTagName('li');
var addBtn = document.getElementById('add-btn');
var i;
var span = document.getElementsByTagName('span');
var listspan = document.getElementById('list-span');
list.addEventListener('click', activeItem);
function activeItem(event) {
if (event.target.nodeName == 'LI') {
document.getElementById("list-span").style.visibility = "";
title.innerHTML = event.target.innerText;
for (var i = 0; i < event.target.parentNode.children.length; i++) {
event.target.parentNode.children[i].removeAttribute('class');
}
event.target.setAttribute('class', 'active');
}
}
addBtn.addEventListener('click', function() {
var txt = prompt('add task');
list.innerHTML += '<li>' + txt + '<span>' + "REMOVE" + '</span>' + '</li>';
list.addEventListener('click', activeItem);
});
<section class="container">
<div class="header-div">
<h1 id='title'>ADD A TASK</h1>
</div>
<div class="button-div">
<button id="add-btn">ADD A TASK</button>
</div>
<div class="list-div">
<ul id='list'>
<li>Walk my dog<span id="list-span">remove</span></li>
<li>Go grocery shopping<span id="list-span">remove</span></li>
<li>Call mom<span id="list-span">remove</span></li>
<li>Do laundry<span id="list-span">remove</span></li>
<li>Call Jane<span id="list-span">remove</span></li>
<li>Eat lunch<span id="list-span">remove</span></li>
</ul>
</div>
</section>

Uncaught Typeerror, Broken JS

I have a menu drop down and a series of filter drop downs, both of which have been working fine up until today.
After adding a logo, with css, to the menu drop down, when I select a filter it breaks my javascript for the menu and the menu doesn't work at all. I get an Uncaught Typeerror.
The filters use forms and 'get' to sort with the onChange set to re-submit the page with the appropriate 'get' parameters.
Here is the menu html
<button id="burg" onclick="menuChange();" class="hamburger">☰</button>
<button id="xCross" onclick="menuChange();" class="cross">˟ </button>
<ul id="navList">
<div class="nav-item">
<a href="inventory.php">
<li>Inventory</li>
</a>
</div>
<div class="nav-item">
<a href="#">
<li>Finance</li>
</a>
</div>
<div class="nav-item">
<a href="contact.php">
<li>Contact Us</li>
</a>
</div>
<div class="nav-item">
<a href="about.html">
<li>About Us</li>
</a>
</div>
<div id="lastNav" class="nav-item">
<a href="reviews.html">
<li>Reviews</li>
</a>
</div>
<div class="" id="navImage">
<a href="index.html">
<li><img src="images/asmOriginalLogo_V4.png" alt="Arizona Specialty Motors"/>
<div id="dropDownSocial"> <img class="socialMediaLinks" src="images/fbLogo.png" alt="Facebook"/> <img class="socialMediaLinks" src="images/In-Black-128px-TM.png" alt="LinkedIn"/> <img class="socialMediaLinks" src="images/instaGlyph.png" alt="Instagram"/> <img class="socialMediaLinks" src="images/twitterLogo.png" alt="Twitter" /> </div>
</li>
</a>
</div>
</ul>
<div id="dropdownFreeze">
Here is my javascript function to open/close the menu.
function menuChange() {
"use strict";
/****** Variables *****/
// Burger link & image
var burger = document.getElementById("burg");
// Individual drop down elements; home, inventory, etc.
var lines = document.getElementsByClassName("nav-item");
// Overall container; to make dropdown 'un-scrollable'
var mainArea = document.getElementById("dropdownFreeze");
// Cross link & image
var cross = document.getElementById("xCross");
// Background for dropdown & navigation
var navList = document.getElementById("navList");
// Social Media images & buttons
var social = document.getElementById("navImage");
// If menu is open, close it. If closed, open it
if (burger.style.display === 'none') {
burger.style.display = 'block';
cross.style.display = 'none';
navList.style.display = 'none';
social.style.display = 'none';
for (var i = 0; i < lines.length; i++) {
lines[i].style.display = 'none';
}
mainArea.style.position = 'relative';
} else {
burger.style.display = 'none';
cross.style.display = 'block';
navList.style.display = 'block';
social.style.display = 'block';
for (var j = 0; j < lines.length; j++) {
lines[j].style.display = 'block';
}
mainArea.style.position = 'fixed';
}
}
Here is one of my filters (all of them cause issues now, but didn't before adding the 'navImage' div)
<form name="sortMake" action="inventorySort.php?limit=10&page=1" method="get">
<select name="makeOrder" class="dropButton" onchange=this.form.submit();>
<option value="choose">Make</option>
<?php
$makeQuery = "select distinct make from vehicle order by make asc";
$makeResult = mysqli_query( $con, $makeQuery );
$selectMakeCount = 0;
if ( $makeResult ) {
while ( $makeRow = mysqli_fetch_array( $makeResult ) ) {
if ( isset( $_GET[ 'makeOrder' ] ) && $_GET[ 'makeOrder' ] == $makeRow[ 'make' ] ) {
echo '<option value="' . $makeRow[ 'make' ] . '"selected>' . $makeRow[ 'make' ] . '</option>';
} else {
echo '<option value="' . $makeRow[ 'make' ] . '">' . $makeRow[ 'make' ] . '</option>';
}
}
}
?>
</select>
The Uncaught Typeerror points to
mainArea.style.position = 'relative';
And to
navList.style.display = 'block';
It says that it cannot read property 'style' of null.
I'm fairly certain the issue is happening in the filter/get.

Wow I feel like a scrub.
For whatever reason, my ids for navList and dropDownFreeze got deleted from one of my pages. After resetting them, it worked perfectly.
Code: 1 Me: 0

Toggle DIVs without reloading page

Pie1 displays by default. Clicking the drop down for Pie2 or Pie3 leaves the DIV blank, selecting Pie1 once again returns echarts_Pie1. MY dropdown for pie2 and pie3 is not working.
<script language="javascript">
ivan = {};
ivan.showhide = function(val1)
{
if(val1 == 1)
{
document.getElementById('echart_pie1').style.display = "";
document.getElementById('echart_pie2').style.display = "none";
document.getElementById('echart_pie3').style.display = "none";
}
else if (val1 == 2)
{
document.getElementById('echart_pie1').style.display = "none";
document.getElementById('echart_pie2').style.display = "";
document.getElementById('echart_pie3').style.display = "none";
}
else if (val1 == 3)
{
document.getElementById('echart_pie1').style.display = "none";
document.getElementById('echart_pie2').style.display = "none";
document.getElementById('echart_pie3').style.display = "";
}
}
</script>
Pie1 displays by default. Clicking the drop down for Pie2 or Pie3 leaves the DIV blank, selecting Pie1 once again returns echarts_Pie1. MY dropdown for pie2 and pie3 is not working.
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Storage</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<option onclick="ivan.showhide(1)">Pie1</option>
<option onclick="ivan.showhide(2)">Pie2</option>
<option onclick="ivan.showhide(3)">Pie3</option>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id="echart_pie1" style="height:180px;"></div>
<div id="echart_pie2" style="height:180px; display:none;"></div>
<div id="echart_pie3" style="height:180px; display:none;"></div>
</div>

Is this the result, you was searching for?
HTML:
<ul role="menu">
<option onclick="ivan.showhide(1)">Pie1</option>
<option onclick="ivan.showhide(2)">Pie2</option>
<option onclick="ivan.showhide(3)">Pie3</option>
</ul>
<div id="echart_pie1" style="height:180px;">a</div>
<div id="echart_pie2" style="height:180px; display:none;">b</div>
<div id="echart_pie3" style="height:180px; display:none;">c</div>
JS:
ivan = {};
ivan.showhide = function(val1)
{
if(val1 == 1)
{
document.getElementById('echart_pie1').style.display = "";
document.getElementById('echart_pie2').style.display = "none";
document.getElementById('echart_pie3').style.display = "none";
}
else if (val1 == 2)
{
document.getElementById('echart_pie1').style.display = "none";
document.getElementById('echart_pie2').style.display = "";
document.getElementById('echart_pie3').style.display = "none";
}
else if (val1 == 3)
{
document.getElementById('echart_pie1').style.display = "none";
document.getElementById('echart_pie2').style.display = "none";
document.getElementById('echart_pie3').style.display = "";
}
}
Actually i didnt even change something, except the contents in your DIV's ( i used a, b and c). This works if it it the result that you expected.

The echarts library might need the containers to be visible during the generation of the graphics, so I would suggest to remove the display:none style from the HTML:
<ul role="menu">
<option onclick="ivan.showhide(1)">Pie1</option>
<option onclick="ivan.showhide(2)">Pie2</option>
<option onclick="ivan.showhide(3)">Pie3</option>
</ul>
<div id="echart_pie1" style="height:180px;"></div>
<div id="echart_pie2" style="height:180px;"></div>
<div id="echart_pie3" style="height:180px;"></div>
In the JavaScript code you have code to initialise the graphics, with calls like these:
var echartPie1 = echarts.init(document.getElementById('echart_pie1'), theme);
// ... etc
Right after that code, add this line:
ivan.showhide(1);
This assumes of course that you have already defined ivan at this point. If not, put that definition first, and then add the above line below it.
A simplification
Not related to the problem, but note that you can simplify the showhide function to this:
ivan = {};
ivan.showhide = function(val1)
{
document.getElementById('echart_pie1').style.display = val1 !== 1 ? "none" : "";
document.getElementById('echart_pie2').style.display = val1 !== 2 ? "none" : "";
document.getElementById('echart_pie3').style.display = val1 !== 3 ? "none" : "";
}
If all three graphs flash at page load
Maybe the page will for a fraction of a second show all three graphs when the page loads. If that is a problem, try this, although it might bring back the original problem:
Add the style visibility: hidden to the ul tag:
<ul role="menu" style="visibility: hidden">
Remove that style once you have called showhide(1):
ivan.showhide(1);
document.querySelector('ul[role=menu]').style.visibility = 'visible';

It doesn't really matter if the <div> is visible when init with ECharts. What matters is that it should have width and height as a container.
So, you could set them with all three charts when page loaded, no matter which one is visible.
document.getElementById('echart_pie1').style.width = '800px';
document.getElementById('echart_pie1').style.height = '600px';
document.getElementById('echart_pie2').style.width = '800px';
document.getElementById('echart_pie2').style.height = '600px';
document.getElementById('echart_pie3').style.width = '800px';
document.getElementById('echart_pie3').style.height = '600px';

onclick function is not work in option element ! So try to change your option format a little bit
<select class="dropdown-menu" role="menu" onchange="ivan.showhide(this.value)">
<option value="1">Pie1</option>
<option value="2">Pie2</option>
<option value="3">Pie3</option>
</select>

Thank you everyone for assisting. Its working now - I tested it using pie1a, pie1b, pie1c.
<script type="text/javascript">
function doLoadStuff()
{
document.getElementById('echart_pie1b').style.display = "none";
document.getElementById('echart_pie1c').style.display = "none";
}
</script>
HTML
<body class="nav-md" onload="doLoadStuff()">
...
<ul class="dropdown-menu" role="menu">
<option onclick="showhidePie1('a')">Pie1a</option>
<option onclick="showhidePie1('b')">Pie1b</option>
<option onclick="showhidePie1('c')">Pie1c</option>
</ul>
<div id="echart_pie1a" style="height:200px;"></div>
<div id="echart_pie1b" style="height:200px;"></div>
<div id="echart_pie1c" style="height:200px;"></div>
I then initialized my 3 pies inside the bottom script
var echartBar1a = echarts.init(document.getElementById('echart_bar1a'), theme);
echartBar1a.setOption(
{
Options...
}
And then used a function to set the style.
function showhidePie1(theChar) {
document.getElementById('echart_pie1a').style.display = "none";
document.getElementById('echart_pie1b').style.display = "none";
document.getElementById('echart_pie1c').style.display = "none";
document.getElementById('echart_pie1'+theChar).style.display = "";
}
Its now working perfectly. Thank you.

How to trigger ng-hide on all elements

I have a list that when you click on an li, it reveals a hidden list of information about that person.
In the footer, theres simple navigation showing the different views and when you click, angular filters through the original list for the matched elements.
All I am stuck on is this;
if you click an li element and reveal the info for that person, then click one of the navigation buttons, it will still show that person but with the hidden element revealed...not closed.
Ideally, id prefer that when the user clicks any of the footer navigation buttons, the list reveals just the names, not the hidden info..regardless of whether it was clicked or not.
If this was just in Jquery or javascript, i would know how to approach this but, Im sure theres an 'angular specific' approach I just don't know about.
Heres the HTML:
<div ng-controller="MyCtrl">
<ul id="housewrapper" ng-cloak>
<li ng-repeat="item in house track by item.member" class="listings" ng-click="showComments = !showComments;" ng-show="([item] | filter:filters).length > 0" >
<span ng-if="item.whereHesheStands == 'oppose'"><img class="dot againstdot" src="img/against.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'leanoppose'">
<img class="dot againstdot" src="img/against.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'support'" ng-click="clickMeImg($event);">
<img class="dot supportdot" src="img/support.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'leansupport' ">
<img class="dot supportdot" src="img/support.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'unknown' ">
<img class="dot undecideddot" src="img/undecided.png">{{item.member}}
</span>
<span ng-if="item.whereHesheStands == 'undecided' ">
<img class="dot undecideddot" src="img/undecided.png">{{item.member}}
</span>
<div class="memberdetail" ng-show="showComments" ng-click="$event.stopPropagation();" >
<ul class="memberbreakdown">
<li class="partyline" >
{{item.party}} - {{item.state}}</li>
<li class="comments">
<span style="color:#a4a4a4;" ng-if="!(item.comments)">Comment not available</span>
<span>{{item.comments}}</span>
</li>
</ul>
</div>
</li>
</ul>
<div id="appfooterWrapper">
<ul id="appfooter">
<li ng-click="myFunctionRepublican();" ng-class="class">R</li>
<li ng-click="myFunctionDemocrat();" ng-class="class2">D</li>
<li ng-click="myFunctionSupport();" ng-class="class3">S</li>
<li ng-click="myFunctionOppose();" ng-class="class4">A</li>
<li ng-click="myFunctionUnknown();" ng-class="class5">U</li>
</ul>
</div>
and the javascript of the "R" navigation button
$scope.myFunctionRepublican = function() {
$('.memberdetail').removeClass('ng-show');
$('.memberdetail').bind('click');
$scope.filters = function(house) {
return house.party == 'R' ;
};
if ($scope.class === ""){
$scope.class = "rep";
$scope.class2 = "";
$scope.class3 = "";
$scope.class4 = "";
$scope.class5 = "";
}
else{
$scope.class = "";
}
$('html, body').animate({scrollTop:0}, 'fast');
var loading;
loading = true;
if (loading == true) {
setTimeout(function() {
spinner.stop();
$('.listings').not('.ng-hide').addClass('republican');
console.log($('.republican').length);
$('#housewrapper').stop().fadeIn(350).addClass(
'marginAdd');
$('#subhead').removeClass('slidedown');
$('#subhead').html('Republicans').css('color', '#d41600');
setTimeout(function() {
$('#subhead').addClass('slidedown');
}, 300);
}, 500);
}
}
Here's the Fiddle

A couple changes, attach a property onto each member.
View changes:
ng-click="item.showComments = !item.showComments;"
<div class="memberdetail" ng-show="item.showComments" ng-click="$event.stopPropagation();" >
Controller changes:
function resetShow() {
for(var i = 0, l = $scope.house.length; i < l; i++) {
$scope.house[i].showComments = false;
}
}
Then just call it when you navigate:
$scope.myFunctionUnknown = function() {
resetShow();
....
Forked Fiddle

Response menu not collapsing and reloads page

At http://www.dentalo.se/contact it is using a responsive menu for mobile devices.
When clicking on the menu button it collapses the menu but the same time reloads the page.
Can anyone tell my why and how I can fix it?
Thanks for the time you are taking to help me.
Edit
HTML
<div class="container">
<div class="navbar-header">
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<button type="button" class="navbar-toggle btn navbar-btn" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN LOGO (you can use logo image instead of text)-->
<a class="navbar-brand logo-v1" href="/">
<img src="/assets/img/logo_blue.png" id="logoimg" alt="">
</a>
<!-- END LOGO -->
</div>
<!-- BEGIN TOP NAVIGATION MENU -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="MainMenuHome">Start</li>
<li class="dropdown" id="MainMenuDentalo">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
Dentalo
<i class="icon-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li id="SubMenuAbout">Om Dentalo</li>
<li id="SubMenuJob">Lediga tjänster</li>
<li id="SubMenuConnect">Anslut</li>
</ul>
</li>
<li id="MainMenuLogIn">Logga in</li>
<li id="MainMenuContact">Kontakt</li>
<li class="menu-search">
<span class="sep"></span>
<i class="icon-search search-btn"></i>
<div class="search-box">
<form action="#">
<div class="input-group input-large">
<asp:TextBox runat="server" placeholder="Sök..." CssClass="form-control" ID="textBoxSearch"></asp:TextBox>
<span class="input-group-btn">
<asp:Button runat="server" CssClass="btn theme-btn" ID="ButtonSearch" OnClick="ButtonSearch_Click" Text="Sök" />
</span>
</div>
</form>
</div>
</li>
</ul>
</div>
<!-- BEGIN TOP NAVIGATION MENU -->
</div>
JavaScript
/*
* Project: Twitter Bootstrap Hover Dropdown
* Author: Cameron Spear
* Contributors: Mattia Larentis
*
* Dependencies?: Twitter Bootstrap's Dropdown plugin
*
* A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
*
* No license, do what you want. I'd love credit or a shoutout, though.
*
* http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
*/
;(function($, window, undefined) {
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this),
$parent = $this.parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$parent.hover(function(event) {
// so a neighbor can't open the dropdown
if(!$parent.hasClass('open') && !$this.is(event.target)) {
return true;
}
if(shouldHover) {
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
}
}, function() {
if(shouldHover) {
timeout = window.setTimeout(function() {
$parent.removeClass('open');
}, settings.delay);
}
});
// this helps with button groups!
$this.hover(function() {
if(shouldHover) {
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
}
});
// handle submenus
$parent.find('.dropdown-submenu').each(function(){
var $this = $(this);
var subTimeout;
$this.hover(function() {
if(shouldHover) {
window.clearTimeout(subTimeout);
$this.children('.dropdown-menu').show();
// always close submenu siblings instantly
$this.siblings().children('.dropdown-menu').hide();
}
}, function() {
var $submenu = $this.children('.dropdown-menu');
if(shouldHover) {
subTimeout = window.setTimeout(function() {
$submenu.hide();
}, settings.delay);
} else {
// emulate Twitter Bootstrap's default behavior
$submenu.hide();
}
});
});
});
};
// helper variables to guess if they are using a mouse
var shouldHover = false,
mouse_info = {
hits: 0,
x: null,
y: null
};
$(document).ready(function() {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
// if the mouse movements are "smooth" or there are more than 20, they probably have a real mouse
$(document).mousemove(function(e){
mouse_info.hits++;
if (mouse_info.hits > 20 || (Math.abs(e.pageX - mouse_info.x) + Math.abs(e.pageY - mouse_info.y)) < 4) {
$(this).unbind(e);
shouldHover = true;
}
else {
mouse_info.x = e.pageX;
mouse_info.y = e.pageY;
}
});
});
// for the submenu to close on delay, we need to override Bootstrap's CSS in this case
var css = '.dropdown-submenu:hover>.dropdown-menu{display:none}';
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
$('head')[0].appendChild(style);
})(jQuery, this);

It appears that your button element (navbar-btn) is submitting your form. Try adding type="button" to the button element.
Also in the click event handler you can also try to add e.preventDefault() to your click event handler.
I cant seem to find the JavaScript from the click event of your button so I can help much more. If this does not work, please edit your question to show the relevant HTML and JavaScript sections.