Develop Reference

JavaScript focus a particular element with div class, not div id declaration

The following function can focus on an element with an id declaration:
function setFocus() {
document.getElementById("focus").focus();
}
But how can one focus on an element with a classname declaration. Use case would be previously in the code where the element we want to focus on is already stored from the dom (i.e., const element = document.querySelectorAll('.a-class-name')[0]) type of scenario?

Does the element have a tab index? You cannot focus a non input element unless it has a tab index. Use tabindex="-1" for elements like divs and spans. Then call the .focus() method on the element. -1 will allow you to focus with the focus method but wont get focus when move the focus around with the keyboard and pressing tab.
document.getElementById('btn').addEventListener('click', function() {
document.querySelectorAll('.focus_me')[0].focus();
});
<span class="focus_me" tabindex="-1">Focus me</span><br>
<button id="btn">Click to focus</button>

element.scrollIntoView(true) will do what you are needing.

document.getElementsByClassName('className') would always return multiple elements because conceptually Classes are meant to be applied to multiple elements. If you want only the first element in the DOM with that class, you can select the first element out of the array returned, as you did.
var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];
OR
var requiredElement = document.querySelector('.className');
Then as #j08691 mentioned in the comments use
function setFocus() {
requiredElement.focus();
}
If the one with getElementById works, then there is no reason for this to not.
Happy coding. :)

how to use auto numbered class into click function

I have the following HTML on a webpage multiple times which is generated by PHP.
generate<div class="selectArea selectBox"></div>
Now I use this code to give each div their own individual classes
$(document).ready(function() {
$(".selectArea").each(function(i) {
$(this).addClass("selectBox" + (i+1));
});
});
But now I need to change this:
$(".selectBox").html($select);
which is inside a click function
$(document).on('click', '.generate', function () {
So that it also works with (i+1).
what i try to achieve
The above code is part of a entire project. In this project I got a selectbox with options generated from several inputs. In the .html I add this selectbox to the div. But right now it is added to all the divs on the page instead of just one.

if the .generate element is right before .selectBox div, then instead of:
$(".selectBox").html($select);
use jQuery's .next():
$(this).next('.selectArea').html($select);

I think that each div is being given the same class so all divs will be affected.
Declare i outside of your function so it is global. Also give it a better name.
Something like this
var select_box_count = 0;
$(document).ready(function() {
$(".selectArea").each(function() {
select_box_count ++;
$(this).addClass("selectBox" + (select_box_count+1));
});
});

You can reference that with an id
In the div that you only want that
$('#id').html($select);
Or just using a selector like
$('.selectBox:first-child').html($select);
Or just
$(".selectBox")[number element].html($select);

jQuery - addClass not adding class to html element

I try to add CSS class to <li> element, when I click on the button but addClass not working.
Here is my JS:
$('.test').click(function(event) {
var centrum1 = $('.p17');
$('section.bok-map').find( centrum1 ).addClass('active-region');
});
And this how is looking HTML code:
Where is the problem? find() returns true.
Here is demo: http://demo.vrs-factory.pl/mapDemo/

You had a couple of errors, as you were not selecting the correct element, hence the length of the selector was 0.
Firstly, the class is called pl7 not p17 and secondly, when using removeClass you don't put the . before the name of the class. As you are using removeClass it is understood that you want to target a class, hence not requiring you to specify this by adding the dot.
<script>
var centrum1 = $('.pl7');
$('.test').click(function(event) {
$('section.bok-map').find( centrum1 ).removeClass('pl7');
});
</script>
Also, it may be worth noting that since you are only referencing$(.pl7) once you do not necessarily have to assign it to a variable. You could also write it as below. It is up to you.
$('.test').click(function(event) {
$('section.bok-map').find('.pl7').removeClass('pl7');
});

Jquery Mobile Filter system, can't hide multiple divs

I'm making a Jquery Mobile app and have a page with 15 or so divs with class', I'm trying to make a filtering system so that when you press a button some of these divs disappear depending on the class. There are 3 groups and they all have an "all" class to display everything making 4 classes total.
Unfortunately most of the js I use never works even if I set up a jsfiddle for jquery mobile when I put it into my app it doesn't seem to work.
I wanted to use
function show(target) {
document.getElementsByClassName(target).style.display = 'block';
}
function hide(target) {
document.getElementsByClassName(target).style.display = 'none';
}
But that doesn't work whereas document.getElementById seems to work fine. However obviously I can only hide/show 1 div per button..
I was wondering if there was a work around for this or something completely different I should try?
Here's a jsfiddle of what I have: http://jsfiddle.net/tzcx7gky/
It's completely broken in jsfiddle but it works fine in my code, which is odd..

You don't need seperate hide - show functions. The following would take care of all.
$('a').on("click",function()
{
$("#scroll_content div").hide(); // initially hide all divs inside the element with id = scroll_content
var target = $(this).text().toLowerCase(); // find the class you wish to show using the text of the a tag clicked ( I would prefer using data-attr in this case but I'll leave the choice upto you.
$("." + target).show(); // show the element with the class target.
});
Working example : http://jsfiddle.net/tzcx7gky/2/

getElementsByClassName returns an array of elements. So you would have to itterate over the array and then set the display property on each one. Since you are already using jQuery you can use it to do it for all the elements.
function show(target) {
/* jQuery uses CSS selectors to grab elements
so we have to prefix the target with "."
Alternativley we could pass in the whole selector in the
function so we don't have to prefix it e.g.
show('.all')
$(target).show();
*/
$("."+target).show();
}
function hide(target) {
$("."+target).hide();
}
Here is the same implementation in the vanilla js framework
function show(target) {
var elements = document.getElementsByClassName(target);
elements.forEach(function(element){element.style.display = 'block';});
}
function hide(target) {
var elements = document.getElementsByClassName(target);
elements.forEach(function(element){element.style.display = 'none';});
}
note that getElementById returns a single element since id's are unique and there should only be one element with one id on the page. That is why it was working for you.

Add class to div when clicked

I am trying to get a class to be added to a div element when clicked. I can not get it to work, I have it set up similar to this:
javascript:
function choose() {
this.addClass("selected");
}
html:
<div class="initialclass" onclick="choose()">CLICK</div>
I have other javascript commands in that function that are working properly I just can't get the class to add.

You have two issues with your current code. First is that this in your JS function refers to the window, not the element that was clicked. Second if it did refer to that element, it would be a DOMElement, not a jQuery object, so it would not have the addClass() method - you need to convert it to a jQuery object. Try this:
<div class="initialclass" onclick="choose(this)">CLICK</div>
function choose(el) {
$(el).addClass("selected");
}
Note however, that it is better practice to hook up your events using JavaScript. As you are using jQuery, you can do this:
<div class="initialclass">CLICK</div>
$(function() {
$('.initialclass').click(function() {
$(this).addClass("selected");
});
});

change your html like this:-
<div class="initialclass" onclick="choose(this)">CLICK</div>
and function:-
function choose(dv) {
$(dv).addClass("selected");
}

Use classList:
classList returns a token list of the class attribute of the element.
el.classList.add("selected");
classList.add:
Adds a class to an element's list of classes. If class already exists in the element's list of classes, it will not add the class again.
CODE
HTML:
<div class="initialclass" onclick="choose(this)">CLICK</div>
Javascript:
function choose(el) {
el.classList.add("selected");
}
DEMO

If you use jquery add this is code in your $(document).ready()
$(".initialclass").click(function(){
$(this).addClass("selected");
});