Develop Reference

Selection onChange is not working on Chrome

I'm using mainly Mozilla, but right now i noticed that some codes is not running on Chrome, such as select>option with eventListener.
This is the link of the page: https://musing-jang-0e572c.netlify.com/senate-data.html Check it on both Chrome and Mozilla..
I want this part work also for Chrome. How can i achieve this?
cbs = document.querySelectorAll("input[type=checkbox]");
selector = document.querySelectorAll("#selector option");
(function() {
targets = document.querySelectorAll("#table tr td:nth-child(3)");
newTr = document.querySelectorAll("#table tr");
for (var z = 0; z < cbs.length; z++) {
cbs[z].addEventListener("change", function() {
targets = document.querySelectorAll("#table tr td:nth-child(3)");
newTr = document.querySelectorAll("#table tr");
console.log(newTr);
console.log(targets);
})
}
// DA FIXARE OPTION => CHECKBOX NEW
for (l = 0; l < selector.length; l++) {
selector[l].addEventListener("click", function() {
for (var i = 0; i < targets.length; i++) {
//console.log(i);
newTr[i].classList.add("hide-row");
if (targets[i].innerHTML == this.value && newTr[i].classList.contains("hide-row")) {
//console.log("Match: " + i);
newTr[i].classList.remove("hide-row");
} else if (this.innerHTML === "ALL"){
for (let i = 0; i < targets.length; i++) {
newTr[i].classList.remove("hide-row");
}
}
}
});
}
for (var p = 0; p < cbs.length; p++) {
cbs[p].addEventListener("change", function() {
console.log("Checkbox");
})
}
})();

Semantically, we shouldn't be adding a "click" listener to an option tag. The <select> tag has an "change" event that you can listen to, and then do your appropriate changes when a <option> is changed.
Please refer to this MDN link. Hope this helps.

Show class div and hide previous - pure javascript

I was actually using a script which allowed me to Show a div onclick and hide others but now I need to do the same with "class" instead of "id".
My current script:
function layout(divName){
var hiddenVal = document.getElementById("tempDivName");
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
var tempDiv = document.getElementById(divName);
tempDiv.style.display = 'block';
hiddenVal.Value = document.getElementById(divName).getAttribute("class");}
What I tried using getElementsByClassName :
function layoutNEW(divName){
var hiddenVal = document.getElementById("tempDivName");
if(hiddenVal.Value != undefined){
var oldDiv = document.getElementById(hiddenVal.Value);
oldDiv.style.display = 'none';
}
var tempDiv = document.getElementsByClassName(divName);
for ( var i=0, len=tempDiv.length; i<len; ++i ){
tempDiv[i].style.display = 'block';
}
hiddenVal.Value = document.getElementById(divName).getAttribute("id");}
Any ideas ?
EDIT : A working example of my current script with "id" : JSFiddle
EDIT 2: It works great, but when the div (class) is cloned, only one of them is showing the div. Do you have an idea about this ? Where is a JSFiddle demonstrating the situation: JSFiddle

I think this is what you'd need. The idea is that you can use a data property on your <a> tags that will tell your click handler which classname to look for when showing an element. From there, you just hide the others. Here's a working demo:
var toggleControls = document.querySelectorAll("[data-trigger]");
var contentDivs = document.querySelectorAll(".toggle");
for (var i = 0; i < toggleControls.length; i++) {
toggleControls[i].addEventListener("click", function(event) {
var trigger = event.target;
var selector = "." + trigger.getAttribute("data-trigger");
var divToShow = document.querySelector(selector);
for (j = 0; j < contentDivs.length; j++) {
contentDivs[j].style.display = "none";
}
divToShow.style.display = "block";
});
}
.toggle {
height: 100px;
width: 100px;
display: none;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: purple;
}
.div4 {
background-color: green;
}
Show Div1
<br/>
Show Div2
<br/>
Show Div3
<br/>
Show Div4
<div class="toggle-container">
<div class="toggle div1"></div>
<div class="toggle div2"></div>
<div class="toggle div3"></div>
<div class="toggle div4"></div>
</div>
EDIT - As per updated question
In order to get this to work with dynamically created elements, you will have to put the var contentDivs = ... inside of the click handler, so you get a live version of that array. Also, you will need to change .querySelector to .querySelectorAll as the former only grabs the first matching element, not all as the latter does.
Here's what the code would look like: (note - I also moved the click handler into an outside function so it was not being recreated for every iteration of the loop, as is good practice)
function clickHandler(event) {
var contentDivs = document.getElementsByClassName("toggle"); // get live set of contentDivs in case any were added dynamically
var trigger = event.target;
var selector = "." + trigger.getAttribute("data-trigger");
var divsToShow = document.querySelectorAll(selector); // grab all matching divs
for (var i = 0; i < contentDivs.length; i++) {
contentDivs[i].style.display = "none";
}
for (var j = 0; j < divsToShow.length; j++) {
divsToShow[j].style.display = "block";
}
}
var toggleControls = document.querySelectorAll("[data-trigger]");
for (var i = 0; i < toggleControls.length; i++) {
toggleControls[i].addEventListener("click", clickHandler);
}
function cloneDiv() {
var elmnt = document.getElementsByClassName("container");
for ( var i=0; i<elmnt.length; i++ ) {
var cln = elmnt[i].cloneNode(true);
}
document.body.appendChild(cln);
document.getElementById("clone").appendChild(cln);
}
window.onload = cloneDiv();

Add css class using document.getElementsByClassName

I am trying to add css class using javascript but its not working
var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++) {
x[i].className += 'newclassname';
}
but when I tried changing background it works
var x = document.getElementsByClassName("oldclassname");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
Am I doing anything wrong while adding css file

className is a space separated list of class names. The problem with your code is that it doesn't separate the class names with spaces. Try this:
var x = document.getElementsByClassName('oldclassname');
var i;
for (i = 0; i < x.length; i++)
{
x[i].className += ' newclassname'; // WITH space added
}
Without the space, it has only one class name
<div class="oldclassnamenewclassname"></div>
//if use space
<div class="oldclassname newclassname"></div>//get two class name

Better use classList:
var x = document.getElementsByClassName('oldclassname');
for (var i = 0; i < x.length; i++) {
x[i].classList.add('newclassname');
}
.newclassname { color: blue; }
<div class="oldclassname">Hello, world!</div>

Hi there is a much simpler way to do this using javascript
TO add a class: -
document.getElementsByClassName('otherClassName')[0].classList.add('newClassName');
To remove a class:-
document.getElementsByClassName('otherClassName')[0].classList.remove('newClassName');
Hope this helps :)

It works . Check your target class name formation.
Sample Code.
<html>
<head>
<style>
.classFrom{
font-family: sans-serif;
color: red;
}
.classTo{
font-family:cursive;
color: blue;
}
</style>
<script type="text/javascript">
function clickme(){
var elmList = document.getElementsByClassName('classFrom');
for (i = 0; i < elmList.length; i++)
{
elmList[i].className += " classTo";
}
}
</script>
</head>
<body>
<div class="classFrom">SampleText</div>
<button onClick="clickme()">ChangeCSS</button>
</body>
</html>

Outputting the value of a particular span when it is clicked

I'm trying to build a script that detects the particular <span> the user clicks on and outputs the value of the contents of that clicked span.
My HTML looks like this:
<div id="span-container">
<span>Lorem</span>
<span>Ipsum</span>
<span>Something...</span>
<span>Something...</span>
<span>Amet</span>
</div>
And my Javascript looks like this:
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(spans[i].innerHTML);
}
}
Attempting to run this code results in a Cannot read property 'innerHTML' of undefined error.
I'm sure giving each span an ID that correlates to its contents like <span id="lorem">Lorem</span> would work, but I'm optimistic that a more elegant solution exists.
I'd also like to avoid using jQuery if possible.
Thanks!

Use event delegation:
var div = document.getElementById('span-container');
div.addEventListener('click', function(e) {
var target = e.target;
if(target.nodeName == 'SPAN') {
alert(target.innerHTML);
}
});

Wrapping it
The problem is, i has changed by the time the user click on it. Use a self-executing function or eventListener
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
(function (j) {
spans[j].onclick = function() {
alert(spans[j].innerHTML);
}
}(i));
}
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
(function (j) { // Receives as j
spans[j].onclick = function() {
alert(spans[j].innerHTML);
}
}(i)); // Passes in i
}
<div id="span-container">
<span>Lorem</span>
<span>Ipsum</span>
<span>Something...</span>
<span>Something...</span>
<span>Amet</span>
</div>
Using this
this will refer to the element clicked and is probably the best way to do this:
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(this.innerHTML);
}
}
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(this.innerHTML);
}
}
<div id="span-container">
<span>Lorem</span>
<span>Ipsum</span>
<span>Something...</span>
<span>Something...</span>
<span>Amet</span>
</div>

The problem here is the wrong use of a closure variable in a loop
But I think in this case you can use addEventListener
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
function spanClickHandler() {
alert(this.innerHTML);
}
for (var i = 0; i < spans.length; i++) {
spans[i].addEventListener('click', spanClickHandler, false);
}
<div id="span-container"> <span>Lorem</span>
<span>Ipsum</span>
<span>Something...</span>
<span>Something...</span>
<span>Amet</span>
</div>
or just use this.innerHTML as this inside the event handler refers to the span element
spans[i].onclick = function () {
alert(this.innerHTML);
}
JavaScript closure inside loops – simple practical example

You can use this for the current element.
Try this code:
div = document.getElementById("span-container");
spans = div.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(this.innerHTML);
}
}

Adding elements on loop jQuery

I am trying to generate a row of 16 boxes on load of webpage.
Here is my code:
var box = $("<div></div>").addClass("box");
$(document).ready(function(){
for(var i = 0; i < 16; i++) {
$("#container").append(box);
}
});
I also tried this within the for loop's code block:
if($("#container:contains(box)")) {
$(box).append(box);
}
I kind of understand why this does not work. That var box is only referencing an element and is not a copy of an element?
As you can likely tell, I'm new. I would really appreciate some pointers on how I can achieve this. Thanks.

Why not just use like this?
for(var i = 0; i < 16; i++) {
$("#container").append('<div class="box box-'+i+'" />');
}

You're appending the same div over and over. That will just move it (in this case, right back where it was). For a new div each time:
$(document).ready(function(){
var ctr = $('#container');
for(var i = 0; i < 16; i++) {
ctr.append("<div class='box'></div>");
}
});
$(document).ready(function() {
var ctr = $('#container');
for (var i = 0; i < 16; i++) {
ctr.append("<div class='box'></div>");
}
});
.box {
margin: 10px;
height: 25px;
width: 25px;
background-color: red;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container"></div>

I recommend against using append in a loop, bad performance. I suggest this:
var buffer = [];
for(var i = 0; i < 16; i++) {
buffer.push("<div class='box'></div>");
}
var html=buffer.join('');
$('#container').append(html);