I want to add class " hidden" in many divs of the same id.
function show_wzorce(x) {
document.getElementById("" + x + "").className += " hidden";
var divs = document.getElementById("" + x + "");
for (var i = 0; i < divs.length; i++) {
divs[i].className += " hidden";
}
}
ID has to be unique. You can do the same thing but with getElementsByClassName (there is a "s" after element)
Your code should look something like this:
function show_wzorce(x) { // assuming x is string
var divs = document.getElementsByClassName(x); //this returns an HTML Collection. But works as an array
for (var i = 0; i < divs.length; i++) {
divs[i].className += " hidden";
}
}
Related
I would like to create 10 Div-Containers, which contain 10 Div Elements.
Therefor i have written the following code in TypeScript using jquery:
for (var i = 0; i < 10; i++) {
var outsidediv = $('<div id="outsidediv"></div>').appendTo('body')
for (var j = 0; j < 10; j++) {
}
var innerdiv = $('<div class="innerdiv"></div>').appendTo('outsidediv');
}
})
But all it does, is that it creates 10 Div Containers and one Div Element, which isn't inside a container.
I'd really appreciate if someone could take a quick look at this (normally) easy problem.
Thank you very much!
for (var i = 0; i < 10; i++) {
var outsidediv = $('<div id="outsidediv' + i +'" class="outsidediv" />').appendTo('body');
for (var j = 0; j < 10; j++) {
var innerdiv = $('<div class="innerdiv"/>').appendTo('.outsidediv:last-child');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I didn't take a close look at what's going on but what jumps out at me straight away is your 2nd for loop is not doing anything as your 'innerdiv' variable is below where it closes.
for (var i = 0; i < 10; i++) {
$('<div id="outsidediv"></div>').appendTo('body');
for (var j = 0; j < 10; j++) {
$('<div class="innerdiv"</div>').appendTo('outsidediv');
}
}
However fixing this wont work because jquery won't know which 'outsidediv' to append to. You are going to have to think of a different approach. Perhaps just output the html you want?
var html = '';
for (var i = 0; i < 10; i++) {
html += '<div id="outsidediv">';
for (var j = 0; j < 10; j++) {
html += '<div class="innerdiv"</div>';
}
html += '</div>';
}
$(html).appendTo('body');
It's not the shortest way to do it but it should do what you want.
Append the .innerdiv already inside its container #outsidediv in one go by creating a single string of HTML and appending that to the body.
for (var i = 0; i < 10; i++) {
var div = '<div id="outsidediv">' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'<div class="innerdiv"></div>' +
'</div>';
$('body').append(div);
}
})
I have code shown below for a project where I insert list elements using javascript and for click on each element I have to call a function. However, it does not seem to work.
var c = document.getElementById("content");
c.innerHTML += "<ul>";
for(var j = 0; j<5; j++){
c.innerHTML += "<li id = '" + j + "'>some stuff"+j+"</li>";
document.getElementById(j).addEventListener("click", function(){ alert('this is test'); }, false);
}
c.innerHTML += "</ul>";
<div id = "content"> </div>
Why is the click event not being triggered? How can I make this work?
Create a function and use it onclick. You can also pass this(the element) as argument to the function where you can get the object attributes in that function.
var c = document.getElementById("content");
c.innerHTML += "<ul>";
for(var j = 0; j<5; j++){
c.innerHTML += "<li id = '" + j + "' onclick='alertMe(this)'>some stuff"+j+"</li>";
}
c.innerHTML += "</ul>";
function alertMe(obj){
alert('this is test from '+obj.id);
}
<div id = "content"> </div>
addEventListener Method:-
document.getElementById can only be called once you have append it into your DOM. before appending to the DOM you cant access it
If you still want to use addEventListener you can achieve by adding listener after appending the element like below
var c = document.getElementById("content");
c.innerHTML += "<ul>";
for(var j = 0; j<5; j++){
c.innerHTML += "<li id = '" + j + "'>some stuff"+j+"</li>";
document.getElementById(j).addEventListener("click", function(){ alert('this is test'); }, false);
}
c.innerHTML += "</ul>";
<div id = "content"> </div>
var c = document.getElementById("content");
c.innerHTML += "<ul>";
for (var j = 0; j < 5; j++) {
c.innerHTML += "<li id = '" + j + "'>some stuff" + j + "</li>";
}
c.innerHTML += "</ul>";
for (var j = 0; j < 5; j++) {
document.getElementById(j).addEventListener("click", function() {
alert('this is test');
}, false);
}
<div id="content"> </div>
The reason the OP doesn't work is because of this:
c.innerHTML += "<li id = '" + j + "'>some stuff"+j+"</li>";
When you concatenate to the innHTML property like that, the element content is first serialised, which removes any listeners that aren't inline (e.g. those added by addEventListener). So the only one remaining at the end of the loop is the last one.
But then you do:
c.innerHTML += "</ul>";
which removes the last one too.
Far better to build a single string of markup and use innerHTML once.
Consider: what should the browser do with the opening UL tag until the closing tag is entered? You've added invalid markup to the document, so it has to use error correction to make something work, so you might end up with a structure that isn't what you expected.
For the listeners, you can include them in-line with the rest of the markup so they survive being serialised and parsed.
Alternatively, use DOM methods to create the elements and stop using innerHTML.
function doClick(){
alert('this is a test ' + this.id);
}
window.onload = function() {
var c = document.getElementById("content");
var list = document.createElement('ul');
for(var j = 0; j<5; j++){
var li = list.appendChild(document.createElement('li'));
li.textContent = 'some stuff ' + j;
li.id = j;
li.addEventListener('click', doClick, false);
}
c.appendChild(list);
};
<div id="content"></div>
Try understand following magic
var c = document.getElementById("content");
c.innerHTML += "<ul>";
for(var j = 0; j<5; j++){
c.innerHTML += "<li id = '" + j + "'>some stuff"+j+"</li>";
}
c.innerHTML += "</ul>";
setTimeout(function () {
for(var j = 0; j<5; j++){
document.getElementById(j).addEventListener("click", function(){ alert('this is test'); }, false);
}
});
<div id = "content"> </div>
I want to change the class of an element depending on the value. Is it possible to do this inside the loop?
Javascript:
$.post(url, filteredObject, function (data2) {
for (i = 0; i < 7; i++) {
$('#ty' + (i + 1).toString()).text(numberWithCommas(data2[i].TY));
$('#sdly' + (i + 1).toString()).text(numberWithCommas(data2[i].SDLY));
$('#fcst' + (i + 1).toString()).text(numberWithCommas(data2[i].FCSTYTD));
}
});
I tried something like this but didn't work.
var textvalue = parseInt($('#ty' + (i + 1).toString()).text)
if (textvalue < 0) {
$('#ty' + (i + 1).toString()).toggleClass("fa fa-level-down");
}
else {
$('#ty' + (i + 1).toString()).toggleClass("fa fa-level-up");
}
Can anyone help me.
you should not use "toggleClass"
.toggleClass( className )
Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence [...]
it removes the class if it is present and adds it if it is not, so achieve that you only have one of fa-level-down and fa-level-up you should use .addClass( className ) and .removeClass( className )
var textvalue = parseInt($('#ty' + (i + 1).toString()).text)
if (textvalue < 0) {
$('#ty' + (i + 1).toString()).addClass("fa-level-down");
$('#ty' + (i + 1).toString()).removeClass("fa-level-up");
}
else {
$('#ty' + (i + 1).toString()).addClass("fa-level-up");
$('#ty' + (i + 1).toString()).removeClass("fa-level-down");
}
You are missing brackets after .text on the line:
var textvalue = parseInt($('#ty' + (i + 1).toString()).text)
You should use .text() to get the text of a jQuery object.
var textvalue = parseInt($('#ty' + (i + 1).toString()).text())
I try to create a dynamic menu using jquery:
function createMenu(array) {
var main = $("#mainUl");
for (var i = 0; i < array.length; i++) {
main.append("<li>");
$('li').append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>");
main.append("</li>");
}
}
The menu is created, but in each li i get more than one span, there is an "inside" loop (I think...)
createing more spans than needed... how can i solve/control it so each li gets
one span according to the for - loop index ?
You are seeing that behaviour because you are appending that anchor with span in selecting all the li elements.
Try,
function createMenu(array) {
var main = $("#mainUl");
for (var i = 0; i < array.length; i++) {
var xLi =("<li>").appendTo(main);
xLi.append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>");
main.append(xLi);
}
}
you can do it simply as below
function createMenu(array) {
var main = $("#mainUl");
for (var i = 0; i < array.length; i++) {
main.append($("<li>").append("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + "</span></a>"));
}
}
$('li') this selector will get every li on the html so every time you iterate to create a new li element you gonna add a new span to all of them.
Try like this:
function createMenu(array) {
var main = $("#mainUl");
for (var i = 0; i < array.length; i++) {
var menuLine = $('<li>');
menuLine.html("<a href='#" + myArray[i].id + "'><span>" + myArray[i].id + " </span></a>" );
main.append(menuLine);
}
}
I have the following two function in my code, the addValueToSTorage has to read the editable table data and add the values to the localStorage and the populate table reads the values from localStorage and populates the table with the updated values and makes the table non-editable.
function addValueToStorage() {
localStorage.clear();
var table = document.getElementById('table');
var i;
var j;
var rowLength = table.rows.length;
for (i = 0; i < rowLength; i++) {
var value=[];
for (j = 0; j < 4; j++) {
value.push(table.rows[i].cells[j].firstChild.data);
}
var val=JSON.stringify(value);
var key = "xyz" + localStorage.length;
localStorage.setItem(key, val);
}
populatetable();
}
function populatetable() {
$('#table').empty();
var header = "<tr><th>Select</th><th>Name</th><th>1</th><th>2</th><th>3</th></tr>";
$('#table').append(header);
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
if (key.substring(0, 5) == "xyz") {
var value = JSON.parse(localStorage.getItem(key));
var xyzvalue = "<tr><td><input type=\"checkbox\" value=" + key + "></td><td><input type=\"text\" value=" + value[0] + "></td><td><input type=\"text\" value=" + value[1] + "</td><td><input type=\"text\" value=" + value[2] + "</td><td><input type=\"text\" value=" + value[3] + "</td></tr>";
$('#table').append(xyzvalue);
}
}
$('#table:input').prop("disabled", true);
}
The addValueToStorage is able to read data from the cells of a normal table, but since my table is editable I have used textboxes inside the table and the addValueToStorage is not able to read the data from the cells and also the table size is completely distorted and is overflowing the div enclosing it because of the textboxes.
Any help on extracting the data and setting the size of the table is greatly appreciated. Thanks in Advance
try changing:
for (i = 0; i < rowLength; i++) {
var value=[];
for (j = 0; j < 4; j++) {
value.push(table.rows[i].cells[j].firstChild.data);
}
var val=JSON.stringify(value);
var key = "xyz" + localStorage.length;
localStorage.setItem(key, val);
}
to
for (i = 0; i < rowLength; i++) {
var value=[];
for (j = 0; j < 4; j++) {
// getAttribute is probably what you're after here
value.push(table.rows[i].cells[j].firstChild.getAttribute('value'));
}
var val=JSON.stringify(value);
var key = "xyz" + localStorage.length;
localStorage.setItem(key, val);
}