Can you help me getting this:
$(document).ready(function() {
$("#large").attr("src",bilder[0]);
$.each(bilder, function(i) {
$("#gallery .large").append("<div class='small'><table><tr><td><img src='"+bilder[i]+"' /></td></tr></table></div>");
});
$(".small td").mouseover(function(){
var src = $("img",this).attr("src");
$("#large").attr("src",src);
});
});
I started with this:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('large').setAttribute('src', bilder[0]);
for (var i = 0, len = bilder.length; i < len; ++i) {
//???
};
});
That's what I have, but appending and mouseover...no idea.
Hope you can help me "converting" this.
Ok, phew, this comes a little close. Can you try this ?
for (var i = 0, len = bilder.length; i < len; ++i) {
var els = document.getElementById("gallery").getElementsByClassName("large");
for (var j = 0; j < els.length; ++j){
els[i].innerHTML += "<div class='small'><table><tr><td><img src='"+bilder[i]+"' /></td></tr></table></div>";
}
};
...
var smallEls = document.getElementsByClassName("small");
for( var i = 0 ; i < smallEls.length; ++i){
var tds = smallEls[i].getElementsByTagName("td");
for( var j = 0 ; i < tds.length; ++j){
tds[j].onmouseover = function(){
var imgs = document.getElementsByTagName("img");
for( var k = 0 ; k < imgs.length; ++k){
var src = imgs[k].src;
document.getElementById("large").addAttribute("src", src);
}
}
}
}
You can use the property innerHtml of an element te set its content. To append some content, you should use +=
Ex: myElement+= "<p>A new paragraph</p>"
FYI, solved it like this:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('large').setAttribute('src', bilder[0]);
for (var i = 0, len = bilder.length; i < len; ++i) {
var els = document.getElementById("gallery").getElementsByClassName("large");
for (var j = 0; j < els.length; ++j){
els[j].innerHTML += "<div class='small'><table><tr><td onmouseover='document.getElementById(\"large\").setAttribute(\"src\", \""+bilder[i]+"\");'><img src='"+bilder[i]+"' /></td></tr></table></div>";
}
};
});
Related
I'm totally new to javascript and I'm trying to display an array of object which is stored in local storage using javascript and html and display each element of the JSON string in td tag of a table
In studentList.js file, first of all, I create a Student object:
function Student(id, name, birthDay, gender, falcuty, point ) {
this.id = id
this.name = name
this.birthDay = birthDay
this.gender = gender
this.falcuty = falcuty
this.point = point
}
var table = document.getElementById("table-stud")
And an array of 'Student' object:
var collection = [];
collection.push(new Student("01","A","20/11/1998","M","IT","8.0"),
new Student("02","B","2/1/1998","F","IT","8.0"),
new Student("03","C","9/9/1997","F","CK","8.8"))
Save student in local storage:
function saveStudent(collection) {
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = JSON.stringify(collection[i])
console.log(studentObjectSerialiseData)
window.localStorage.setItem("student"+i, studentObjectSerialiseData)
}
}
Display students:
function getStudents() {
console.log(Student.length)
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student"+i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for(var j = 0; j < Student.length; j++) {
var td = document.createElement("td")
td.innerText = temp[j]
tr.appendChild(td)
}
table.appendChild(tr)
}
}
saveStudent(collection);
getStudents();
In HTML file, I called studentList.js file and added id to the 'table' tag, the localStorage worked perfectly but when I want to display, this happened:
id Name birthDay Gender Falcuty Point
undefined undefined undefined undefined undefined undefined
undefined undefined undefined undefined undefined undefined
undefined undefined undefined undefined undefined undefined
Please help me solve this problem!
The problem is mostly on the parts you're trying to loop over the keys of Student. Utilize Object.keys for achieving it instead:
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for (var j = 0; j < Object.keys(temp).length; j++) {
var td = document.createElement("td")
console.log(temp)
td.innerText = temp[Object.keys(temp)[j]]
tr.appendChild(td)
}
table.appendChild(tr)
}
}
For a working example, see this snippet: https://jsbin.com/koqikiquzu/1/edit?html,js,output (Tried to embed through SO's own playground, but using localStorage is a bit tricky here).
temp in getStudents() is an object so you need to loop over that too.
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i)
var temp = JSON.parse(studentObjectSerialiseData)
var tr = document.createElement("tr")
for (var j = 0; j < Student.length; j++) {
for(var i in temp) {
var td = document.createElement("td")
td.innerText = temp[i]
tr.appendChild(td)
}
}
table.appendChild(tr)
}
}
You can get the result by using for in loop inside j for loop and appends to tr tag if j and i are equal.
function getStudents() {
for (var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student" + i);
var temp = JSON.parse(studentObjectSerialiseData);
var tr = document.createElement("tr");
for (var j = 0; j < Student.length; j++) {
for (x in temp) {
if (j == i) {
var td = document.createElement("td");
td.innerText = (temp)[x];
tr.appendChild(td);
}
}
}
table.appendChild(tr)
}
}
Access Student in a for in loop to get the keys.
for(var i = 0; i < collection.length; i++) {
var studentObjectSerialiseData = window.localStorage.getItem("student"+i)
var temp = JSON.parse(studentObjectSerialiseData)
console.log(temp);
for(var j in Student) {
console.log(temp[j]) ;
}
}
var dbRefObjectHis = firebase.database().ref('Box1').child('history');
dbRefObjectHis.on('value',gotData, errData);
function gotData(data) {
var ref = d3.selectAll('.His');
for (var i = 0; i < ref.length; i++){
ref[i].remove();
}
var history = data.val();
var keys = Object.keys(history);
for (i = 0; i < keys.length; i++) {
var k = keys[i];
var humidity = history[k].humidity;
var temperature = history[k].temperature;
$('.His').append('Humidity:' + humidity + 'Temperature:' + temperature );
}
This happens when the element you are trying to remove is not a removable Node.
try replacing
for (var i = 0; i < ref.length; i++){
ref[i].remove();
}
with
ref.forEach(function(e) {
e.remove();
});
I have two functions that return column children and row children, how can I return the parents and their children’s separately, I mean each parent with his childrens.
function cols() {
var c = document.querySelectorAll('.row');
for (var i = 0; i < c.length; i++) {
for (var j = 0; j < c.length; j++) {
c[j].children[i].style.backgroundColor = "orange";
alert(c[j].children[i] / 3 );
}
}
}
cols();
function rows() {
var c = Array.prototype.slice.call(document.querySelectorAll('.row'));
for (var i = 0; i < c.length; i++) {
for (var j = 0; j < c.length; j++) {
c[i].children[j].style.borderColor = "red";
alert(c[i].children[j]);
}
}
}
rows();
fiddle:
I would do it like this:
window.onload=function(){
rows=document.getElementsByClassName("row");
rows.forEach(function(row){
colums=row.children;
colums.forEach(function(col){
alert(col,row);
});
});
}
I have code for one modal and i understand I do not have to duplicate it to allow for another button on the page to call up different content, but I have tried to modify this in multiple ways with no luck.
Please take a look and tell me what i'm missing.
<script type="text/javascript">
var modal = document.getElementById("modal");
var radios = document.querySelectorAll("#modal input[type='radio']");
var fields = document.getElementById("modal").querySelectorAll("input[type='text']");
var button_div = document.getElementById("button-div");
var buttons = document.querySelectorAll("#button-div button");
document.getElementById("editme").onclick = function() {
modal.style.visibility = "visible";
for(var i = 0; i < radios.length; i++) { radios[i].classList.add("show"); }
};
document.getElementById("close-button").onclick = function () {
modal.style.visibility = "hidden";
for(var i = 0; i < radios.length; i++) { radios[i].classList.remove("show"); }
};
for(var i = 0; i < fields.length; i++){ fields[i].style.width = fields[i].clientWidth - 18 + "px"; }
var max = 0;
for(var i = 0; i < buttons.length; i++){ max = ( max > buttons[i].clientWidth ? max : buttons[i].clientWidth ); }
for(var i = 0; i < buttons.length; i++){ buttons[i].style.width = max + "px"; }
button_div.style.bottom = button_div.getBoundingClientRect().bottom - modal.getBoundingClientRect().bottom + 40 + "px";
</script>
how to search for exactly "-p" in the ids of huge html and append a counter after it i.e -p+counter. Please help.
If what you're asking is to replace -p with -pXX in all ids where XX is an increasing counter, you can do it like this:
var id, counter = 1;
var elems = document.getElementsByTagName("*");
for (var i = 0, len = elems.length; i < len; i++) {
id = elems[i].id;
if (id && id.indexOf("-p") != -1) {
elems[i].id = id.replace("-p", "-p" + counter++);
}
}
If you're just trying to add the text "+counter", then you can do it this way:
var id;
var elems = document.getElementsByTagName("*");
for (var i = 0, len = elems.length; i < len; i++) {
id = elems[i];
if (id && id.indexOf("-p") != -1) {
elems[i].id = id.replace("-p", "-p+counter");
}
}
If what you want (your original post is not very clear) is to replace only id values where the whole id is "-p", then you can use this:
var counter = 1;
var elems = document.getElementsByTagName("*");
for (var i = 0, len = elems.length; i < len; i++) {
if (elems[i].id == "-p") {
elems[i].id += counter++);
}
}
OK, fourth guess at what you want (based on your comments) if you want -p replaced only if the p isn't followed by another letter:
var id, counter = 1;
var elems = document.getElementsByTagName("*");
for (var i = 0, len = elems.length; i < len; i++) {
id = elems[i].id;
if (id) {
elems[i].id = id.replace(/\-p([\W_]|$)/, "-p" + counter++ + "$1");
}
}
And, here's a demo: http://jsfiddle.net/jfriend00/Ug7VN/
A jQuery version of this last one would work like this:
var counter = 1;
$('[id]').each(function() {
this.id = this.id.replace(/\-p([\W_]|$)/, "-p" + counter++ + "$1");
});
With jQuery, this should be as simple as:
var counter = 0;
$('[id*="-p"]').each(function() {
$(this).attr('id', $(this).attr(id).replace('-p', '-p' + counter++));
});
Edit: if you only want items with an id ending in -p, you can use the following (note the different selector):
var counter = 0;
$('[id$="-p"]').each(function() {
$(this).attr('id', $(this).attr(id).replace(/-p$/, '-p' + counter++));
});