Develop Reference

Load var n from localStorage and loop n times

I'm trying to learn JS and this is my little app.
Every time I press the "INSTANTIATE" button, it instantiates a tomatoe.png in my <div>.
When the user reloads the page, the tomatoe.png should appear as many times as they've pressed the "INSTANTIATE" button.
This is the code. For this purpose, I created a variable (i), and it increments on every button press.
I planned to save this variable into localStorage, and when the page gets reloaded, I want to call a loop function that instantiates the tomatoe.png i times.
function popUp() {
var img = document.createElement("img");
img.src = "tomato.png";
var src = document.getElementById("header");
src.appendChild(img);
i++;
localStorage.setItem("apples", i);
}
<button onclick="popUp()">INSTANTIATE</button>
<div id="header"></div>
So, when the user reloads the page, as many tomatoes should appear as many times they've pressed the button.
I think I have to use a loop, but I don't know how.

Just get the item in localStorage and loop until it reaches 0, creating a new image each time (localStorage don't works in StackOverflow snippets here because of security reasons, but you get the point).
var i = 0;
function popUp() {
newImage();
i++;
localStorage.setItem("apples", i);
}
function newImage() {
var img = document.createElement("img");
img.src = "tomato.png";
var src = document.getElementById("header");
src.appendChild(img);
}
var oldi = Number(localStorage.getItem("apples"));
while (oldi > 0) {
oldi--;
newImage();
}
<button onclick="popUp()">INSTANTIATE</button>
<div id="header"></div>

First of all, you have to declare i outside your function (in case you haven't done it already) and give it a value of zero, if it isn't exist in the Local Storage:
let i = localStorage.getItem("apples") || 0;
Then, create a loop, that loops i times:
for(let n = 0; n < i; n++){}
And finally, just create tomatoes:
const img = document.createElement("img");
img.src = "tomato.png";
const src = document.getElementById("header");
src.appendChild(img);
So, the full code should look like this:
document.addEventListener('DOMContentLoaded', function(){
function popUp() {
createTomato()
i++;
localStorage.setItem("apples", i);
}
function createTomato() {
const img = document.createElement("img");
img.src = "tomato.png";
const src = document.getElementById("header");
src.appendChild(img);
}
document.getElementById("instantiate").addEventListener("click", popUp)
let i = localStorage.getItem("apples") || 0;
for (let n = 0; n < i; n++) createTomato();
})
<button id="instantiate">INSTANTIATE</button>
<div id="header"></div>
Try it on codepen.io

Set 'src' attribute for document.createElement('script')?

I'm trying to create a highchart on a different tab. But Im getting error that high chart is not defined. I have tried to register Highchart.js using different methods. Code is given below.
function OpenWin() {
var w = window.open();
w.document.open();
w.document.write('<div id="container" style="width:100%; height:400px;"></div>');
var scriptHead = w.document.createElement("SCRIPT");
//scriptHead.setAttribute('src','http://code.highcharts.com/highcharts.js');
var link = "http://code.highcharts.com/highcharts.js";
scriptHead.src = link;
w.document.head.appendChild(scriptHead);
var script = w.document.createElement("SCRIPT");
w.document.body.appendChild(script);
var js = w.document.createTextNode('var a = localStorage.getItem("ImportOptions"); console.log(JSON.parse(a)); var chart = new Highcharts.Chart(JSON.parse(a))');
script.appendChild(js);
w.document.close();
}

You need to wait for previous script to load. Demo.
function OpenWin() {
var w = window.open();
w.document.open();
w.document.write('<div id="container" style="width:100%; height:400px;"></div>');
var scriptHead = w.document.createElement("SCRIPT");
//scriptHead.setAttribute('src','http://code.highcharts.com/highcharts.js');
var link = "http://code.highcharts.com/highcharts.js";
// bind on script load event
scriptHead.onload = function() {
var script = w.document.createElement("SCRIPT");
w.document.body.appendChild(script);
var js = w.document.createTextNode('var a = localStorage.getItem("ImportOptions"); console.log(JSON.parse(a)); var chart = new Highcharts.Chart(JSON.parse(a))');
script.appendChild(js);
w.document.close();
}
// as A.Wolff mentioned you might need to set onload befor src for some browsers.
scriptHead.src = link;
w.document.head.appendChild(scriptHead);
}

i want to create labels using jquery through for loop

i want to create labels dynamically using for loops...this is what i have done and its not working kindly help me solve this issue
$(document).ready(function() {
function create_labels(strt, end, overlay_body) {
for (var i = strt; i < end; i++) {
var labels=jQuery('<label id=lbl>hahahahha</label>');
labels.appendTo(overlay_body);
}
}
});
var strt = 9;
var end = 17;
var overlay_body = jQuery('<div id=overlay_body></div>');
overlay_body.appendTo(document.body);
create_labels(strt,end,overlay_body);

You should learn how to debug your javascript code.If you inspected the browser console you would know exactly what the problem is.To bring up the browser console in Google Chrome you can click Ctrl+Shift+J.
The problem is that the create_labels() function is not accessible outside of the jQuery load function.One way to fix this is to move the logic which calls this function inside the jQuery load:
$(document).ready(function () {
var strt = 9;
var end = 17;
function create_labels(strt, end, overlay_body) {
for (var i = strt; i < end; i++) {
var labels = jQuery('<label id=lbl>hahahahha</label><br />');
labels.appendTo(overlay_body);
}
}
var overlay_body = jQuery('<div id=overlay_body></div>');
overlay_body.appendTo(document.body);
create_labels(strt, end, overlay_body);
});

Using one javascript code on multiple sections

I don't know much about jQuery but I've been using the following javascript code to make a table keep the scroll bar location upon pageback:
<script type="text/javascript">
window.onload = function () {
var strCook = document.cookie;
if (strCook.indexOf("!~") != 0) {
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS + 2, intE);
document.getElementById("grdWithScroll").scrollTop = strPos;
}
}
function SetDivPosition() {
var intY = document.getElementById("grdWithScroll").scrollTop;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
and
<div id="grdWithScroll" onscroll="SetDivPosition()">
It works great for a single div. But how could I extend this for use with a second div section?

Instead of using document.getElementById, you can asign the same class name to all the divs for which you want this functionality, and then user the jQuery selector $(".scrollgrid") to select the multiple divs, and store the scroll tops. If you do not want to use jQuery, you can look at the custom functions that people have written to select the elements by class name. Here is an example.
http://www.netlobo.com/javascript_getelementsbyclassname.html

Instead of a single div id, you could use class attribute to define all the divs you want the feature to be used on.
<div id="grdWithScroll" class="coolScroll" onscroll="SetDivPosition()">
</div>
<div id="abcWithScroll" class="coolScroll" onscroll="SetDivPosition()">
</div>
Use jQuery (or other libraries) to easily select all divs with said class and access the scrollTop attribute
$('.coolScroll').each( function()
{
// do something with scrollTop
}
You could also use the class selector to set the onscroll function.
$('.coolScroll').attr( 'onscroll' , 'javascript:SetDivPosition()' );

Found what I was looking for here:
http://social.msdn.microsoft.com/Forums/nb-NO/jscript/thread/ad18ed20-8ae2-4c13-9a51-dcb0b1397349
<script language="javascript" type="text/javascript">
//This function sets the scroll position of div to cookie.
function setScrollPos() {
var div1Y = document.getElementById('div1').scrollTop;
var div2Y = document.getElementById('div2').scrollTop;
document.cookie = "div1Pos=!*" + div1Y + "*!" +
" div2Pos=|*" + div2Y + "*|";
}
///Attaching a function on window.onload event.
window.onload = function () {
var strCook = document.cookie; if (strCook.indexOf("!~") != 0) {
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS + 2, intE);
document.body.scrollTop = strPos;
}
/// This condition will set scroll position of <div> 1.
if (strCook.indexOf("iv1Pos=!*") != 0) {
var intdS = strCook.indexOf("iv1Pos=!*");
var intdE = strCook.indexOf("*!");
var strdPos = strCook.substring(intdS + 9, intdE);
document.getElementById('div1').scrollTop = strdPos;
}
/// This condition will set scroll position of <div> 2.
if (strCook.indexOf("iv2Pos=!*") != 0) {
var intdS = strCook.indexOf("iv2Pos=|*");
var intdE = strCook.indexOf("*|");
var strdPos2 = strCook.substring(intdS + 9, intdE);
document.getElementById('div2').scrollTop = strdPos2;
}
}
</script>

Find an anchor in a Div with javascript

In javascript I have a reference to a div. In that div is an anchor element with a name='foundItem'
How do I get a reference to the anchor with the name foundItem which is in the Div I have the reference of?
There are 'many' foundItem anchors in other divs on the page. I need 'this' DIVs one.

// assuming you're not using jquery or mootools
// assume div is mydiv
var lst = mydiv.getElementsByTagName('a');
var myanchor;
for(var i=0; i<lst.length; ++i) {
if(lst[i].name && lst[i].name == 'foundItem') {
myanchor = lst[i];
break;
}
}
// the mootools method
var myanchor = $(mydiv).getElement('a[name=foundItem]');

You can use the getElementsByTagName method to get the anchor elements in the div, then look for the one with the correct name attribute:
var found = null;
var e = divReference.getElementsByTagName('A');
for (var i=0; i < e.length; i++) {
if (e[i].name && e[i].name == 'foundItem') {
found = e[i];
break;
}
}
If found is not null, you got the element.
If you happen to use the jQuery library, you can let it do the searching:
var found = null;
var e = $(divReference).find('a[name=foundItem]');
if (e.length == 1) found = e.get(0);

Use a JavaScript library like jQuery and save yourself time.
var theAnchor = $('#divId a[name=foundItem]');

Using jquery, it's dead easy:
<script type="text/javascript">
$(function(){
var item = $("#yourDivId a[name=foundItem]")
)};
</script>
Update:
As per the comments, if you have control over what to id/name/class your anchor tag/s, it would be best to apply a class to them:
<div id="firstDiv">
test
</div>
<div id="secondDiv">
test another one
</div>
<!-- and so forth -->
<script type="text/javascript">
$(function(){
var item = $("#firstDiv a.foundItem");
alert(item.html()); // Will result in "test"
var item2 = $("#secondDiv a.foundItem");
alert(item2.html()); // Will show "test another one"
)};
</script>
If you're doing anything with javascript, jQuery saves you tons of time and is worth investing the effort to learn well. Start with http://api.jquery.com/browser/ to get an intro to what's possible.

Not sure if this helps, but wanted a function to handle the load of a page dynamically and scroll to the anchor of choice.
function scrollToAnchor(anchor_val) {
alert("" + anchor_val);
var page = document.getElementById('tables');
var found = null;
var cnt = 0;
var e = document.getElementsByTagName('a');
for (var i = 0; i < e.length; i++) {
if (e[i].name && e[i].name == anchor_val) {
found = e[i];
break;
}
cnt++;
}
if (found) {
var nPos = found.offsetTop;
alert("" + nPos);
page.scrollBy(0, nPos);
} else {
alert('Failed with call of scrollToAnchor()' + cnt);
}
}