In order to animate images in - I need to add many divs using Javascript over the image where at present the markup is
<div class="js-img-in">
<figure><img src="test.jpg"></figure>
</div>
To eventually compile to
<div class="js-img-in">
<div class="js-anim-img-in"></div>
<div class="js-anim-img-in"></div>
<div class="js-anim-img-in"></div>
<div class="js-anim-img-in"></div>
<div class="js-anim-img-in"></div>
<figure><img src="test.jpg"></figure>
</div>
My code at the moment returns appendChild is not a function.
const imageAnimIn = () => {
const images = document.querySelectorAll(".js-img-in");
for (var x = 0; x < 5; x++) {
var imageOverDivs = document.createElement('div');
imageOverDivs.className = "js-anim-img-in";
images.appendChild(imageOverDivs);
}
}
This error took me to this S.O article. createTextNode here, however, will not help me as I am adding an element node, not text.
Will querySelectorAll not work in this instance?
You want querySelector(), not querySelectorAll(). Then you want Node.insertBefore(), and pass in the figure element as the second argument.
const imageAnimIn = () => {
const image = document.querySelector(".js-img-in")
const fig = document.querySelector(".js-img-in > figure")
for (var x = 0; x < 5; x++) {
var imageOverDivs = document.createElement('div');
imageOverDivs.className = "js-anim-img-in";
image.insertBefore(imageOverDivs, fig)
}
}
imageAnimIn()
.js-anim-img-in::after{
content: "New Div"
}
<div class="js-img-in">
<figure><img src="http://placekitten.com/100/100"></figure>
</div>
<!--<div class="js-img-in">
<div class="js-anim-img-in"></div>
<div class="js-anim-img-in"></div>
<div class="js-anim-img-in"></div>
<div class="js-anim-img-in"></div>
<div class="js-anim-img-in"></div>
<figure><img src="test.jpg"></figure>
</div>-->
Did you mean to loop through images.length, and use the image position? Because the result of document.querySelectorAll is a NodeList, not just a single node.
const imageAnimIn = () => {
const images = document.querySelectorAll(".js-img-in");
for (var x = 0; x < images.length; x++) { // Loop through each result
for (var _ = 0; _ < 5; _++) { // Updated to disregard variable
var imageOverDivs = document.createElement('div');
imageOverDivs.className = "js-anim-img-in";
images[x].appendChild(imageOverDivs); // Added [x]
}
}
}
Related
It populates all the divs at once instead of adding the texts one box at a time. What I want to do is to add an alphabet to each box. How do i achieve this?
<div id="alphabet"></div>
<div id="choice" class="choice">
<div class="chi" id="chi">b</div>
<div class="chi" id="chi">s</div>
<div class="chi" id="chi">a</div>
<div class="chi" id="chi">v</div>
<div class="chi" id="chi">y</div>
<div class="chi" id="chi">c</div>
const alphabet = document.getElementById('alphabet')
const input = document.getElementById('input')
const btn = document.querySelector('#btn')
let cc = 4;
for (let i = 0; i < cc; i++) {
let tt = document.createElement('div')
tt.classList.add('newie')
alphabet.append(tt);
choice.addEventListener('click', populateDivs)
function populateDivs(e){
let clickedAlphabet = e.target.innerText;
tt.innerHTML = clickedAlphabet;
}
}
You can do this with querySelectorAll.
const allDivs = document.querySelectorAll(".chi");
allDivs.forEach(function(element) {
// Whatever you want to happen.
});
In my electron app I want to toggle between different screens, thus I need to use block and none displays.
I have a side navbar which contain the anchor tags, whenever I click one of those I want my screen to block all the other screens and display the one which was clicked.
Required Code Below
Side NavBar -not attaching the css for it
<div class="sidebar">
Home
Tasks
TimeTable
Quick notes
Expenses
</div>
Different Displays
<div id="home" class="screen" style="display: none">
<h1 class="centertitle">Home</h1>
</div>
<div id="tasks" class="screen" style="display: none">
<h1 class="centertitle">Tasks</h1>
</div>
Script
<script>
function showtasks() {
let task = document.getElementById("tasks");
let taskbtn = document.getElementById("taskbtn");
let allnav = document.getElementsByClassName("nava");
let allscreens = document.getElementsByClassName("screen");
allscreens.style.display = "none";
task.style.display = "block";
allnav.className = "";
taskbtn.className = "active";
}
function showhome() {
let home = document.getElementById("home");
let homebtn = document.getElementById("homebtn");
let allnav = document.getElementsByClassName("nava");
let allscreens = document.getElementsByClassName("screen");
allscreens.style.display = "none";
home.style.display = "block";
allnav.className = "";
homebtn.className = "active";
}
</script>
The problem here is the allscreens variable.
getElementsByClassName returns an array of elements with the given class name. So in order to set them all to display: none, you will need to loop through the elements.
let allscreens = document.getElementsByClassName("screen");
for (var i = 0; i < allscreens.length; i++) {
allscreens[i].style.display = "none";
}
function showtasks() {
let task = document.getElementById("tasks");
let taskbtn = document.getElementById("taskbtn");
let allnav = document.getElementsByClassName("nava");
let allscreens = document.getElementsByClassName("screen");
for (var i = 0; i < allscreens.length; i++ ) {
allscreens[i].style.display = "none";
}
task.style.display = "block";
allnav.className = "";
taskbtn.className = "active";
}
function showhome() {
let home = document.getElementById("home");
let homebtn = document.getElementById("homebtn");
let allnav = document.getElementsByClassName("nava");
let allscreens = document.getElementsByClassName("screen");
for (var i = 0; i < allscreens.length; i++ ) {
allscreens[i].style.display = "none";
}
home.style.display = "block";
allnav.className = "";
homebtn.className = "active";
}
<div class="sidebar">
Home
Tasks
TimeTable
Quick notes
Expenses
</div>
<div id="home" class="screen" style="display: none">
<h1 class="centertitle">Home</h1>
</div>
<div id="tasks" class="screen" style="display: none">
<h1 class="centertitle">Tasks</h1>
</div>
I have a site where I can enter the amount of an item, it will then take that input value and return the result on the page. I am then trying to get the results of all the items and return a grand total.
The issue is when I a loop to do this it will only add the first one.
I created a fiddle: https://jsfiddle.net/rc1mgLj5/4/
I am using querySelectorAll and using the length of all the classNames for the result of the first return.
Then looping them after parsing them to a number from text.
But at the moment it is only doing the first calculation. If I delete the for loop the first part works correctly again.
So since its only doing the first calculation for the first item, I get NaN for the second because it does not have a number to parse.
const total = document.querySelectorAll(".tot");
const price = document.querySelectorAll(".cost");
let textval = document.querySelectorAll(".qty-item");
const cal = document.getElementById("calc");
const errorMessage = document.querySelectorAll(".error");
cal.addEventListener("mouseover", function(e) {
console.log(total);
for (var i = 0; i < price.length; i++) {
let xPrice = price[i].innerHTML.split("$");
let parsePrice = parseFloat(xPrice[1]);
if (textval[i].value === "" || isNaN(textval[i].value)) {
setMessage("Please enter a number", "red");
} else {
let x = parseFloat(textval[i].value);
let y = parsePrice;
let z = x * y;
total[i].innerText = z.toFixed(2);
total[i].innerText = z;
for (i = 0; i < total.length; i++) {
let j = parseFloat(total[i].innerHTML);
console.log(j);
}
}
}
});
HTML:
<body>
<div class="main">
<span class="title">A Title</span>
</div>
<div class="content">
<div class="item">
<span>Item 1</span>
</div>
<div>
<span class="cost">$100.00</span>
</div>
<div id="qty">
<label>QTY:</label><input placeholder="0" class="qty-item">
<p class="error"></p>
</div>
<div class="tot">
<span><label>TOTAL</label> $0.0</span>
</div>
</div>
<br><br>
<div class="main">
<span class="title">A Title</span>
</div>
<div class="content">
<div class="item">
<span>Item 2</span>
</div>
<div>
<span class="cost">$50.00</span>
</div>
<div class="qty">
<label>QTY:</label><input placeholder="0" class="qty-item">
<p class="error"></p>
</div>
<div class="tot">
<span><label>TOTAL</label> $0.0</span>
</div>
</div>
<div class="calc-button">
<button id="calc">Calculate Prices</button>
</div>
</body>
You are nesting two fors using the same i variable as index:
cal.addEventListener('mouseover', function(e) {
console.log('total', total);
for (var i = 0; i < price.length; i++) {
//...
for (i = 0; i < total.length; i++) { // <== uses "i" again
let j = parseFloat(total[ii].innerHTML);
console.log(j);
}
}
}
});
Just replace that second for's variable with another name. Example:
for (let k = 0; k < total.length; k++) {
let j = parseFloat(total[k].innerHTML);
console.log(j);
}
Demo: https://jsfiddle.net/acdcjunior/gpLvszx3/
It seems you are using the same variable "i" for both loops and i is being reset in the second loop to 3 and hence the main loop runs only once. So i removed the following code and calculated the total outside main loop. seems to be working fine now. https://jsfiddle.net/uxr7ac9k/7/
total[i].innerText = z;
for (i=0;i < total.length; i++){
let j = parseFloat(total[i].innerHTML);
console.log(j);
}
I have multiple json object and each object have multiple same, For example:
A->
- A1
-A1A
-A1A
- A2
-A2A
-A2A
- A3
-A3A
-A3A
I have tired to execute in below code but it's not working. Can you please suggest me what is the issue in my code?
subscriptionbarMyData = JSON.parse(window.localStorage.getItem('subscriptionBarJson'));
$('.total-month-cost-product-header-names').text('').addClass('hidden');
for (var key in subscriptionbarMyData) {
if (subscriptionbarMyData.hasOwnProperty(key)) {
var val = subscriptionbarMyData[key];
$('.total-month-cost-product-header')
.find('.total-month-cost-product-header-names')
.removeClass('hidden')
.addClass('show')
.text(val.Name + val.ProductPrice);
var addonvalue = subscriptionbarMyData[key]["Add-on"];
for (var keyval in addonvalue) {
if (addonvalue != undefined) {
var TotalOneCostProduct = $('.total-month-cost-product-items').text('');
for (var keyval in addonvalue) {
// var dataValues = addonvalue[keyval].Name;
$('.total-month-cost-product-header-names')
.text(addonvalue[keyval].Name)
.appendTo(TotalOneCostProduct);
}
}
}
}
}
<div class="summary-block">
<div class="total-month-cost-summary">
<div class="total-month-cost-product-header">
<div class="total-month-cost-product-header-names"></div>
<div class="total-month-cost-product-header-price"></div>
</div>
<div class="total-month-cost-product-items">
<div class="total-month-cost-product-item-names"></div>
<div class="total-month-cost-product-item-price"></div>
</div>
</div>
</div>
When I try to get child div IDs within each parent div/class I get the error "Uncaught TypeError: Cannot set property '0' of undefined". I am using this javascript with scriptaculous so I have turned off the "$" shortcut.
Example HTML:
<div id="group1" class="section">
<h3 class="handle"><input type="hidden" name="groupName1" value="MyGroup1">MyGroup1</h3>
<div id="item_73548" class="lineitem">item a</div>
<div id="item_73386" class="lineitem">item b</div>
<div id="item_73163" class="lineitem">item c</div>
</div>
<div id="group2" class="section">
<h3 class="handle"><input type="hidden" name="groupName2" value="MyGroup2">MyGroup2</h3>
<div id="item_73548" class="lineitem">item d</div>
<div id="item_73386" class="lineitem">item e</div>
<div id="item_73163" class="lineitem">item f</div>
</div>
The Javascript:
$.noConflict();
var sections = document.getElementsByClassName('section');
var groups = new Array();
for (i = 0; i < sections.length; i++) {
var section = sections[i];
var sectionID = section.id;
var j = 0;
jQuery.each(jQuery("#" + sectionID + " .lineitem"), function () {
groups[i][j] = jQuery(this).attr('id');
j++;
});
}
console.log(groups);
The output should be:
groups[0][0]="item_73548";
groups[0][1]="item_73386";
groups[0][2]="item_73163";
groups[1][0]="item_73548";
groups[1][1]="item_73386";
groups[1][2]="item_73163";
Fiddle here: http://jsfiddle.net/qy9dB/3/
You just need to make sure that groups[i] is setup as an array before you try and add 2nd level elements to the array.
$.noConflict();
var sections = document.getElementsByClassName('section');
var groups = new Array();
for (i = 0; i < sections.length; i++) {
var section = sections[i];
var sectionID = section.id;
groups[i] = [];
var j = 0;
jQuery.each(jQuery("#" + sectionID + " .lineitem"), function () {
groups[i][j] = jQuery(this).attr('id');
j++;
});
}
console.log(groups);