Develop Reference

how to get span inner text inside div tag

am embedding powerapps form in sharepoint page. i have a dropdown box in powerapps. in sharepoint page based on dropdown value i want to display some code. from below code i want APAC text. here this html code is dynamically generated in browser.
this is my HTML code which is generated in browser.
<div data-is-focusable="true" id="react-combobox-view-0" class="label_kohvda-o_O-label_2lsolt" tabindex="9" role="listbox" aria-expanded="false" aria-haspopup="true" aria-atomic="true" title="Region" aria-live="assertive">
<div style="width: 100%; overflow: hidden; position: relative; display: flex; height: 100%; align-items: stretch;">
<ul style="margin: 0px; padding: 5px; list-style: none; display: flex; overflow: hidden;">
<li class="selectedItem_1og5q2j">
<span class="topTagText_yz2uri-o_O-topTagText_t9v74o-o_O-topTagTextReadonly_ps5463">APAC</span></li></ul></div>
<div class="combobox-view-chevron arrowContainer_1kmq8gc-o_O-container_r2h174-o_O-containerColors_1803dea"></div></div>

With JavaScript if you have the dynamic generated elements classes you can do:
document.querySelector('.label_kohvda-o_O-label_2lsolt span.topTagText_yz2uri-o_O-topTagText_t9v74o-o_O-topTagTextReadonly_ps5463')
If you do not have the elements classes, according to the html you can do:
const span = document.querySelector('div div ul li span')
console.log(span.innerText)
<div data-is-focusable="true" id="react-combobox-view-0" class="label_kohvda-o_O-label_2lsolt" tabindex="9" role="listbox" aria-expanded="false" aria-haspopup="true" aria-atomic="true" title="Region" aria-live="assertive">
<div style="width: 100%; overflow: hidden; position: relative; display: flex; height: 100%; align-items: stretch;">
<ul style="margin: 0px; padding: 5px; list-style: none; display: flex; overflow: hidden;">
<li class="selectedItem_1og5q2j">
<span class="topTagText_yz2uri-o_O-topTagText_t9v74o-o_O-topTagTextReadonly_ps5463">APAC</span>
</li>
</ul>
</div>
<div class="combobox-view-chevron arrowContainer_1kmq8gc-o_O-container_r2h174-o_O-containerColors_1803dea"></div>
</div>

We can use jQuery to achieve it.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var region=$("div[title='Region'] li[class^='selectedItem']").text();
alert(region);
});
</script>
Or
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var myVar;
$(function () {
myVar = setInterval(getDropdownValue, 100);
});
function getDropdownValue(){
if($("div[title='Region'] li[class^='selectedItem']").length>0){
var region=$("div[title='Region'] li[class^='selectedItem']").text();
alert(region);
clearInterval(myVar);
}
}
</script>

Keep getting "cannot read property style of null" error

I am working on my own website and not good with codes yet. When I am scrolling down I want to appear another content of the navbar and when I am on the top, original navbar is appearing. I want this to be done in pure JavaScript with no libraries or framewokrs. Please see codes below and I know that codes are not organised. I will do that later on.
var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
window.onscroll = function(){
if(document.body.scrollTop > 70){
hide.style.display = "block";
appear.style.display = "none"
} else {
hide.style.display = "none";
appear.style.display = "block"
}
}
nav{
list-style-type: none;
text-align: center;
background-color: #3FA9A5;
position: sticky;
top: 0;
}
.hide{
font-size: 70px;
font-family: 'Long Cang', cursive;
display: block;
}
.appear{
height: 70px;
display: none;
}
.appear img{
width: 210px;
}
ul{
margin: 0 auto;
padding: 0;
}
body{
margin: 0;
}
.container{
max-width: 1080px;
width: 95%;
margin: 10px auto;
display: grid;
grid-template-columns: 25% 50% 25%;
}
.text{
text-align: center;
}
.profile {
border: 1px solid black;
padding: 0 10px 20px 10px;
}
#main{
width: 100%;
}
.post{
margin-left: 4.165%;
}
#image{
width: 100%;
}
#post-divide{
margin-left: 10px;
margin-right: 10px;
}
.comments{
width: 100%;
margin-top: 68.5px;
padding-bottom: 293.5px;
border: 1px solid black;
}
h2{
text-align: center;
}
.center{
grid-column: 2;
}
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>
<body>
<nav>
<ul>
<li class="hide">Unknown</li>
<li class="appear"><img src="cat.png"></li>
</ul>
</nav>
<div class="container">
<div class="col-1">
<div class="profile text">
<img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
<hr>
<p>12 posts</p>
<p>instagram</p>
<button>Subscribe!</button>
</div>
</div>
<div class="col-1">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
<div class="col-1 center">
<div class="post">
<h2>TITLE</h2>
<div>
<img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
</div>
<hr id="post-divide">
</div>
</div>
<div class="col-1">
<div class="comments text"></div>
</div>
</div>
I think I should add something to the JS code but don't know why
Would be thankful if you would advise me how could I write HTML/CSS code so I do not have to create 2 navbars if it is possible

The following instruction:
document.querySelector("hide");
Will query for elements like:
<hide></hide>
Since plain selectors without prefix (div, header, span) will query for the whole element tags, not for classes or attrbitues.
Maybe you meant to query for the class, using the .:
document.querySelector(".hide");

var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")
So you should use class selector

You are using "hide" and "appear" as selectors but they do not exist in your HTML.
Use ".hide" and ".appear" in your querySelector instead.
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear");

Since both navbars have a static data, I would suggest to keep both of them and follow with answers of guys, that suggested to update querySelector param. Or you can hide/show the data inside of navbar (in your case it's only ul element) and leave the whole navbar always visible. So you can put classes appear/hide on ul element instea of navbar and then in JS get them with document.querySelector('.navbar .hide') and document.querySelector('.navbar .appear').
Using framework/library will definitely simplify it.
However, if you still want to have only one navbar in pure js/html/css (or it's data just dynamic) I would probably do like this:
HTML:
<nav class="navbar">
<ul>
<li><img src="cat.png"></li>
</ul>
</nav>
somewhere in JS:
var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
if (document.body.scrollTop > 70) {
navbarUl.innerHtml = '';
navbarUl.appendChild(getTopNavbarHTML);
} else {
navbarUl.innerHtml = '';
navbarUl.appendChild(getNavbarHTML);
}
}
getNavbarHTML and getTopNavbarHTML - will return documentFragment with li elements, see for details https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp
But changing DOM during a scroll event can drastically decrease performance of a web app

Carousel gallery with filter

I will try to explain to you, with my limited english, what I'm trying to do
I have an image gallery on my page and I've created this gallery
with cycle2 and
lightGallery
I have a filter link on my carousel (animal,sports,natural,all)
So what I want to do ?
For example: if I click animal, then only show me [data-id="animal"] div and hide another div different from [data-id="animal"]
What I have done so far ?
I've created my gallery correctly. It works very well so far and as I expect.cycle2 is working and when you click any image then it is opening on popup(lightgallery)
What I haven't done so far ?
Everything is okay until you click any category. When you choose any category, neither cycle2 or lightgallery are working..
Then, after this filtering, lightgallery must work or be generated again (I guess).
More simply what do I want?
Filterable photo/image gallery only this what I want to thing
Any Example that you can show us ?
For example this - only as a logic - but this is the only example and I want to do only using cycle2 and jquery I need improve myself and see something on jquery.
If you check my category id, name, and .item data-id name, I'm sure you will understand what I'm trying to do.
$(document).ready(function() {
function generateSlider() {
$('#myCarousel').cycle({
next: "#single-right",
log: false,
fx: 'fade',
caption: '.cycle-caption',
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}'' width='60' height='60'>",
prev: "#single-left",
slides: "div[data-hidden='false']"
});
}
generateSlider();
$('#myCarousel').lightGallery({
selector: "div[data-hidden='false']",
exThumbImage: "data-exthumbimage",
loadYoutubeThumbnail: true,
youtubeThumbSize: 'default',
loadVimeoThumbnail: true,
vimeoThumbSize: 'thumbnail_medium',
});
$("#filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$("div").attr("data-hidden", "false");
} else {
$("div").attr("data-hidden", "true");
$("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$("#myCarousel").cycle("destroy");
generateSlider();
return false;
});
});
.mySlideShow {
width: 700px;
position: relative;
}
.item img {
cursor: pointer;
}
#single-pager img {
margin: 3px;
cursor: pointer;
width: 60px;
height: 60px;
}
#filter {
position: absolute;
top: 0;
right: 10%;
z-index: 100;
}
#filter li {
display: inline-block;
background: rgba(0, 0, 0, .7);
color: #FFF;
cursor: pointer;
padding: 12px;
}
.cycle-caption {
position: absolute;
bottom: 14%;
left: 0;
padding: 12px;
background: rgba(0, 0, 0, .5);
color: #FFF;
text-align: center;
width: 100%;
z-index: 100;
}
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>
<div class="mySlideShow">
<div id="myCarousel">
<div class="item" data-src="http://images.freeimages.com/images/previews/49a/massive-gear-1255802.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/fa7/my-ride-1552678.jpg" data-id="animals" data-hidden="false" data-title="image 1">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/f7a/gear-1462890.jpg" />
</div>
<div class="item" data-src="http://images.freeimages.com/images/previews/7ae/autos-1194364.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/5f6/kaputtes-auto-1564173.jpg" data-id="sports" data-hidden="false" data-title="image 2">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/20e/some-grill-1450817.jpg" />
</div>
<div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
<img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg" />
</div>
</div>
<div id="single-pager">
</div>
<ul id="filter">
<li id="animals">Animals</li>
<li id="sports">Sports</li>
<li id="natural">Natural</li>
<li id="show-all">All</li>
</ul>
<div class="cycle-caption"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script>
<script src='https://cdn.jsdelivr.net/g/lightgallery#1.3.5,lg-fullscreen#1.0.1,lg-hash#1.0.1,lg-pager#1.0.1,lg-share#1.0.1,lg-thumbnail#1.0.1,lg-video#1.0.1,lg-autoplay#1.0.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
<script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>
Also, you can see my demo on codepen too

You have to specify in the CSS to make the data-hidden=true actually hidden.
div[data-hidden=true] {
display: none;
}

On click slideToggle multiple hidden div

What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.

Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>

You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).

Minify code for same divs for same effect

i have the following jquery code:
$('#menu1').click(function(e){
$('#menu1').addClass('fullscreen');
if($('#menu1').hasClass('fullscreen')){
$('.barra').removeClass('hidden');
}
});
$('#close').click(function(e){
$('#menu1').removeClass('fullscreen').animate({
width: '200px',
height: '200px'
}, 2500);
});
HTML
<section>
<div class="content">
<div id="menu1">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
<div id="menu2">
<!-- quadrado 2 -->
</div>
<div id="menu3">
<!-- quadrado 3 -->
</div>
<div id="menu4">
<!-- quadrado 4 -->
</div>
</div>
</section>
I want the same for all divs, called "menu" (from 1 to 4), without having to copy the same code and having too many lines, for the same procedure.
All div's will have "$('#menu').addClass('fullscreen');" and "$('.barra').removeClass('hidden');". Any help or guidance?
How to achieve this?
CSS
section{ //"menu" alignment center
position: absolute;
width: 100%;
height: 100%;
top: 50%;
bottom: 50%;
text-align: center;
}
.content{
position: relative;
display: inline-block;
width: 420px;
height: 200px;
margin-top: 9%;
}
#menu1, #menu2, #menu3, #menu4{
width: 200px;
height: 200px;
}
#menu1.fullscreen{
top: 0;
left: 0;
z-index: 9;
position: fixed;
width: 100%;
height: 100%;
background: #131313;
color: #fff;
}

I usually do this by using a class selector.
Add a class "menu" to echo menu element:
<div id="menu2" class="menu">
<!-- quadrado 2 -->
</div>
Then Select it like so:
$('.menu').click(function(e){
$(this).addClass('fullscreen');
if($(this).hasClass('fullscreen')){
$('.barra').removeClass('hidden');
}
});
The jQuery selector $(this) refers to the clicked element.

Just finished your code, I improved it a bit by adding one or two things. So here it goes .. while you did not provide a css or anything I styled it fast to be able to get the job done.
CSS
<style>
div[id^="menu"]{
background: #333;
margin: 30px;
float: left;
width: 100px;
height: 80px;
}
.close {
display: none;
color: #fff;
width: 100%;
height: 15px;
background: #4779ff;
}
.ThisElementIsClicked .close {
display: block;
}
</style>
HTML
<div class="content">
<div id="menu1" class="menu-box">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
<div id="menu2" class="menu-box">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
<div id="menu3" class="menu-box">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
<div id="menu4" class="menu-box">
<div class="blackbar hidden">
<img src="img/cross.png" width="40" height="40" alt="fechar"/>
</div>
</div>
</div>
jQuery WITH COMMENTS - go below for the no comments version
$(document).ready(function(){
//focus on all elements that have an ID starting with the string 'menu'
//you do that adding '^' before the '=' sign.
var targetThis = $('div[id^="menu"]');
//test it yourself to see it's working
//uncomment this line below to display the info into your console
//console.log(targetThis);
targetThis.on('click', function(){
//set a variable with the element you clicked on
var thisEl = $(this),
thisID = thisEl.attr('id').substr(4);
if(!thisEl.hasClass('ThisElementIsClicked'))
{
//if you want all other menu boxes to close while
//the current clicked menu box is clicked just remove the class for
//all elements that have the ID starting with the string 'menu'
//that is the first variable we created before the click event occured
//uncomment the line below to see the results
//targetThis.removeClass('ThisElementIsClicked');
//add the class to the current clicked menu box
thisEl.addClass('ThisElementIsClicked');
//remove the hidden class
//but this should not be made with jQuery but with CSS
//just style the 'hidden' class based on the parent class that we added on click 'ThisElementIsClicked'
$('#menu' + thisID).children('.blackbar').removeClass('hidden');
//now while this box is opened
//add inside this block of code the script for
//the closing button
var closeBtn = thisEl.find('.close');
closeBtn.on('click', function(e){
e.stopPropagation();
$(this).parents('#menu' + thisID).removeClass('ThisElementIsClicked');
$(this).parents('#menu' + thisID).children('.blackbar').addClass('hidden');
});
}
});
});
jQuery NO COMMENTS
$(document).ready(function(){
var targetThis = $('div[id^="menu"]');
targetThis.on('click', function(){
var thisEl = $(this),
thisID = thisEl.attr('id').substr(4);
if(!thisEl.hasClass('ThisElementIsClicked'))
{
//targetThis.removeClass('ThisElementIsClicked');
thisEl.addClass('ThisElementIsClicked');
$('#menu' + thisID).children('.blackbar').removeClass('hidden');
var closeBtn = thisEl.find('.close');
closeBtn.on('click', function(e){
e.stopPropagation();
$(this).parents('#menu' + thisID).removeClass('ThisElementIsClicked');
$(this).parents('#menu' + thisID).children('.blackbar').addClass('hidden');
});
}
});
});
Hope this helps you ... and by the way, you have the option to only display one box at the time, when you click a box all other boxes close. Read the comments.