Develop Reference

How to Change Text on Page Depending on Selected Item from Semantic UI's Dropdown?

I'm running into trouble trying to automatically change the text in two div tags on a page when selecting an item from Semantic UI's dropdown. I'm not sure where I'm going wrong. I made a javascript function that should be targeting the dropdown and retrieving values from there.
Here's the HTML code
<h2 class="sTypeText">Undefined</h2>
<span class="annotation">
You've selected <b class="sTypeText">undefined</b> mode. You can continually edit this mode and its details.
</span>
<div id="dropdown" class="ui fluid selection dropdown" onchange="changeSelect">
<div class="text">Choose Type</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="A">Assessment</div>
<div class="item" data-value="G">Group</div>
<div class="item" data-value="S">Solo</div>
</div>
</div>
Here's the Javascript code:
function changeSelect() {
if (document.getElementById("dropdown").data-value == "A") {
document.getElementByClassName("sTypeText").innerHTML = "Assessment";
} else if (document.getElementById("dropdown").data-value == "G") {
document.getElementByClassName("sTypeText").innerHTML = "Group";
} else if (document.getElementById("dropdown").data-value == "S") {
document.getElementByClassName("sTypeText").innerHTML = "Solo";
}
}

To get data attribute values, you can try using {DOMElement}.getAttribute('data-{name of attribute}') or by using the dataset property: {DOMElement}.dataset.{name of attribute}
Try changing your code to this to get the value from the data attribute "value":
function changeSelect() {
if (document.getElementByClassName("dropdown").dataset.value == "A") {
document.getElementByClassName("sTypeText").innerHTML = "Assessment";
} else if (document.getElementById("dropdown").dataset.value == "G") {
document.getElementByClassName("sTypeText").innerHTML = "Group";
} else if (document.getElementById("dropdown").dataset.value == "S") {
document.getElementByClassName("sTypeText").innerHTML = "Solo";
}
}

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

Append <li class> to <ul class> with jQuery

When I run the function in the browser, "[object Object]" shows up instead of the text stored inside the variable $new_comment. I wish to append user inputs.
HTML :
<li class="list-group-item">"User comments"</li>
<div class="comments">
<ul class="list-group"></ul>
</div>
Js :
var addCommentFromInputBox = function() {
var $new_comment;
if ($(".input-group input").val() !== "") {
$new_comment = $("<p>").text($(".input-group input").val());
$new_comment.hide();
$(".list-group").append('<li class="list-group-item">' + ($new_comment) + '</li>');
$new_comment.fadeIn();
$(".input-group input").val("");
}
};
Everything runs fine when I change the code to:
$(".list-group").append($new_comment);
But I wish to style it with Bootstrap.

You can use it something like this $(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
Here this the full demo code
addCommentFromInputBox = function() {
var $new_comment;
if ($(".input-group input").val() !== "") {
$new_comment = $("<p>").text($(".input-group input").val());
$new_comment.hide();
$(".list-group").append($('<li class="list-group-item"></li>').html($new_comment));
$new_comment.fadeIn();
$(".input-group input").val("");
}
}
addCommentFromInputBox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments">
<ul class="list-group">
</ul>
</div>

var listGroupItem = $('<li class="list-group-item"></li>').html($new_comment)
$(".list-group").append($listGroupItem);

Clicking on a tag to get event on sibling tag

I have the following html
<ul id="report">
<li class="suite">
<h1>Level 2</h1>
<ul>
<li class="test pass fast">
<h2>it first</h2>
<pre style="display: none;">
<code>('hello').should.be.a('string');</code>
</pre>
</li>
</ul>
</li>
</ul>
I want to change the pre style from display:block to display:none when the h2 tag above it is clicked. But, I cannot for the life of me figure out how to do this. I know I need to do something along the lines of:
function changeStyle() {
pre.style.display = 'none' == pre.style.display
? 'block'
: 'none';
}
But I cannot figure out how to attach it to the h2. I've tried:
var h2 = getElementsByTagName('h2');
var pre = h2.getElementById('pre');
But that isn't right since pre is not a child of h2. I'm not sure what to do. I tried adding a variety of click event listeners to h2 and calling the changeStyle function.
Note: I would really prefer not to have to use jQuery.
Edit: Alright, so I'm not crazy. I have tried almost all of these methods before posting this question and they didn't work. There has to be something else going on here.
For example, I tried Josh Beam's method and I get: "Cannot read property 'addEventListener' of undefined" error.
I even tried wrapping it with
document.onLoad = function () {
//code
}
and it still doesn't work.

If you want to make sure you're getting the sibling pre element, just do this (see the jsfiddle):
document.getElementsByTagName('h2')[0].addEventListener('click', function(e) {
var pre = e.target.nextElementSibling;
pre.style.display = pre.style.display === 'block' ? 'none' : 'block';
});
This will make sure you're not selecting any other pre elements that might be present on the page.

Will work for any H2 element inside ul#report
var main_ul = document.querySelector("#report");
main_ul.onclick = function(event){
var elm = event.target;
if(elm.tagName === "H2"){
var pre = elm.nextElementSibling; // tada magic!
changeStyle(pre);
}
};

You can make use of getElementsByTagName like this:
var flag = 0
document.getElementsByTagName('h2')[0].onclick = function() {
if (flag == 1) {
document.getElementsByTagName('pre')[0].style.display = "none";
flag = 0;
} else {
document.getElementsByTagName('pre')[0].style.display = "block";
flag = 1;
}
}
<ul id="report">
<li class="suite">
<h1>Level 2</h1>
<ul>
<li class="test pass fast">
<h2>it first</h2>
<pre style="display: none;">
<code>('hello').should.be.a('string');</code>
</pre>
</li>
</ul>
</li>
</ul>
This will also allow you to toggle the display.

You can do something like this
var report = document.getElementById("report"); // <--- get the parent
var h2 = report.getElementsByTagName('h2')[0]; // <--- search for h2 within parent
var pre = report.getElementsByTagName('pre')[0];// <--- search for pre within parent
h2.addEventListener('click', function(){ // <--- attach event to h2
pre.style.display = pre.style.display === 'none' ? '' : 'none'; // <--- toggle display
});
var report = document.getElementById("report");
var h2 = report.getElementsByTagName('h2')[0];
var pre = report.getElementsByTagName('pre')[0];
h2.addEventListener('click', function() {
pre.style.display = pre.style.display === 'none' ? '' : 'none';
});
<ul id="report">
<li class="suite">
<h1>Level 2</h1>
<ul>
<li class="test pass fast">
<h2>it first</h2>
<pre style="display: none;">
<code>('hello').should.be.a('string');</code>
</pre>
</li>
</ul>
</li>
</ul>

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