Develop Reference

How to run css line in Javascript [duplicate]

This question already has answers here:
Adding text to an existing text element in JavaScript via DOM
(7 answers)
Closed 3 years ago.
I need to make a dynamic row counter for my table. I do this with a span but how do i run my javascript function on it so it prints the number out?
html;
<span id="Tellen"></span>
Javascript;
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
}
Could someone help me into the right direction, much appreciated.

You didn't assign output to html span
Try this Tag :
<span id="Tellen"></span>
JS
function tellen(){
var rowCount = document.getElementById('tableID').rows.length;
document.getElementById('Tellen').innerText = rowCount
}
But you need some event to call tellen() .. It can be onClick of button or something like this

Using function that uses 'this' keyword not working as expected [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
Title may not be correct but i didnt know how to ask my question !
I have encountered a problem with this keyword . While using it as in this code <input type="text" onkeyup="this.value=this.value.toUpperCase();"></input>
it works perfectly. But when i allot a function on input element that uses this keyword , it dont work as in
HTML
<input type="text" ></input>
Javascript
var inp=document.getElementsByTagName('input')[0];
inp.onkeyup=up;
function up()
{
this.value=this.value.toUpperCase();
}

Can you bind onkeyup event in HTML? If yes then use this code:
<script>
function up(element) {
element.value = element.value.toUpperCase();
}
</script>
<input type="text" onkeyup="up(this)"></input>

How about taking it off of the global scope? Try binding in an IIFE:
(function bindEventHandler(tag) {
var inp = document.getElementsByTagName(tag)[0];
inp.onkeyup = function up() {
this.value=this.value.toUpperCase();
};
}('input'));

If you do it this way, make sure to add the script at the end of your body tags, and then it'll work.

JavaScript Only - Remove Certain classes if present [duplicate]

This question already has answers here:
How to add/remove a class in JavaScript?
(13 answers)
Closed 7 years ago.
I have the following classes (below), they are added dynamically on the HTML (below).
I have classes already present, what Javascript recommended code should be used to remove one or all of these classes if they are already present on the html below. The function I am building, will reset the element, I NEED the current classes to be present, but the colour classes need to be removed if one / multiple values are present.
HTML
<div id="overlay__inner" class="overlay__inner overlayActive clearfix"></div>
Classes
<ul>
<li>is--blue</li>
<li>is--red</li>
<li>is--yellow</li>
<li>is--purple</li>
<li>is--green</li>
<li>is--pink</li>
<li>is--orange</li>
</ul>
UPDATE:
So in a nutshell, I want to do this jQuery example in javascript:
$('#overlay__inner').removeClass('is--blue is--red is--yellow is--purple is--green is--pink is--orange');
This is what I have so far:
document.getElementById('overlay__inner').classList.remove('is--blue').classList.remove('is--red').classList.remove('is--yellow').classList.remove('is--purple').classList.remove('is--green').classList.remove('is--pink').classList.remove('is--orange');
But I get this error:
Uncaught TypeError: Cannot read property 'classList' of undefined

Removing a single class is rather straightforward, what are you having trouble with specifically?
var els = document.querySelectorAll('.is--blue');
Array.prototype.forEach.call(els, function(el) {
el.classList.remove('is--blue');
});
.is--blue {
color: blue;
}
<p class="is--blue something-else">Sample</p>
<p class="is--blue">Sample</p>

class selectors on javascript generated content [duplicate]

This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
This was a dublicate question, George's link to a previous question had my answer
I'm having an issue where selectors aren't functioning with dynamically generated javascript content.
The initial works just fine. Once the for loop generates more div's, even though it's got the same class, the 'mouseover' css styling won't apply.
Code that Generates the divs:
for (x; x < y; x++) {
output = output + '<div class="over">'+
'But not for these generated divs'+
'</div>';
}
$("#content").html(output);
Code that styles the divs with class "over":
$(".over").hover(function () {
$(this).addClass("styling");
});
$(".over").mouseout(function () {
$(this).removeClass("styling");
});
http://jsfiddle.net/kjhansen/1e08ypms/28/

Use jQuery on() Try this:
$(document).on('mouseover','.over',function () {
$(this).addClass("styling");
});
$(document).on('mouseout','.over',function () {
$(this).removeClass("styling");
});
FIDDLE EXAMPLE

For loop combined with addeventlistener not working (same output) [duplicate]

This question already has answers here:
How do JavaScript closures work?
(86 answers)
Closed 8 years ago.
I'm adding click events to li tags in my html. The refresh function I attach to it works fine, just as adding the events. Although the events are all the same..
HTML:
<li class="folder" id="css">css</li>
<li class="folder" id="images">images</li>
<li class="folder" id="js">js</li>
JS:
function addEvent(){
var dirLinks = document.getElementsByClassName('folder');
for(i=0; i< dirLinks.length; i++) {
var tarDir = dirLinks[i].id;
alert(tarDir);
dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+tarDir);}, false);
}
}
I want each li tag to click through to a dir that's equal to it's ID. But all the events let me click through to the last found id..(JS) While the alert shows three different ID's..(css, images & js)
What am I doing wrong here? Can't figure it out.

The problem is that you are referencing tarDir inside a closure, so when you concatenate it you get the last value that has been assigned to it (the value assigned in the last loop iteration). See How do JavaScript closures work? for a deep explanation of how closure works.
To solve, you can replace this:
dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+tarDir);}, false);
with this:
dirLinks[i].addEventListener('click', function(){refresh('file_manager', 'file-manager.php?tarDir='+this.id);}, false);
This works because when the closure is evaluated this points to dirLinks[i]
This is a working example (I've replaced the call to refresh with alert only to show that it works): http://jsfiddle.net/fFe8U/1/