Develop Reference

createElement within for loop [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I want to make an element 50 times within a for loop. My code is below:
function pGenerate() {
for (i, i <= 50; i++;) {
var newP = document.createElement("p");
var pText = document.createTextNode("sample paragraph");
newP.appendChild(pText);
var contentSection = document.getElementById("content");
document.body.insertBefore(newP, contentSection);
}
}
The expected result is that it generates 50 <p> tags with "sample content inside of them. The actual result is well...nothing. https://jsfiddle.net/2L8reked/1/
My thought process behind the code I wrote this code is as follows: I basically have a loop set to cycle 50 times. for each cycle, I want to create a p tag, along with create a text node with the content "sample paragraph." In the next step, I grab the div by it's id, #content, and I then attempt to populate the area using insertBefore.
My error here seems to be how I use insertBefore. Looking this up on MDN, it's definition is "inserts the specified node before the reference node as a child of the current node." https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
With that definition in mind - I'm using this with the understanding as of now that I'm inserting (or attempting to) the p tags as a child of #content. Should I be using a different method? Am I misunderstanding how this works?
I also tried an innerHTML approach, seen here: https://jsfiddle.net/0e1ej9sk/1/
which method is best suited for what I'm trying to do?
In the first example what is the flaw behind my logic of the use of insertBefore?

You have 3 syntax errors.
Change i, in for loop to 1=1; then remove the last ; where i++; to i++
function pGenerate() {
for (i=1; i <= 50; i++) {
var newP = document.createElement("p");
var pText = document.createTextNode("sample paragraph");
newP.appendChild(pText);
var contentSection = document.getElementById("content");
document.body.insertBefore(newP, contentSection);
}
}
window.onload = function() {
pGenerate();
}
<div id="content"></div>

You need to initialize i at 1, and properly separate all parts of the for statement with semi-colons, like this:
function pGenerate() {
for (var i = 1; i <= 50; i++) {
var newP = document.createElement("p");
var pText = document.createTextNode("sample paragraph (i=" + i + ")");
newP.appendChild(pText);
var contentSection = document.getElementById("content");
document.body.insertBefore(newP, contentSection);
}
}
pGenerate();
<div id="content"></div>

you can do this
function pGenerate() {
for (i=1; i <= 50; i++) {
var newP = document.createElement("p");
var pText = document.createTextNode("sample paragraph");
newP.appendChild(pText);
var contentSection = document.getElementById("content");
document.body.insertBefore(newP, contentSection);
}
}
document.ready(pGenerate);

Storing DOM element reference in JavaScript Array. Why cant I reuse stored reference to add eventListener? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm afraid it might be a silly question, but I have no idea what occurs my problem.
I dynamically create buttons (each button has unique id), and I store each btn reference (document.getElementById()) in simple two-dimensional array. All these because i need to hold btns in well organized structure.
The problem is: when i try to modify element by reference previously stored in my array, there appears to be no connection between ref and html element.
var Table = {
size: 10,
table: [],
generateTable: function() {
var i = 0,
j = 0,
id = null,
tablePlaceholder = document.getElementById("tableHTML");
//Generate table
for (i = 0; i < this.size; i++) {
this.table.push([]);
for (j = 0; j < this.size; j++) {
id = i.toString() + "-" + j.toString();
tablePlaceholder.innerHTML += element(id);
this.table[i].push(document.getElementById(id));
}
tablePlaceholder.innerHTML += "</br>";
}
console.log(this.table[0][0].className);
document.getElementById("0-0").className += " btn-success";
console.log(this.table[0][0].className);
}, ...
Results of last two console.logs is the same, but element has changed in DOM.
table[0][0] returns same content as document.getElementById("0-0").
(element() function returns simple html code (it works well))

innerHTML += '<div>...</div>';
This could break references to already constructed DOM elements and cause other chaos. In reality, all you want to do is append a single new element to the end.
var elem = document.createElement('div');
elem.id = id;
tablePlaceholder.appendChild(elem);​​​​​​​​​​​​​​​​

Javascript/HTML error cannot find variable [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
Via onclick I am calling a function that does some calculations and then should be replacing some elements (h1) on the fly with the information calculated within the function.
I have this done the same exact way on several other places on my page, except this one seems to be giving me an error.
ReferenceError: Can't find variable: container2
I believe it might have something to do with the element's ID.
HTML:
<div id="macros">
<h4>Macronutrients recommended:</h4>
<h2>Protein: <span id="myprotein"></span></h2>
<h2>Fats: <span id="myfat"></span></h2>
<h2>Carbs: <span id="mycarb"></span></h2>
</div>
Javascript:
function calcmacros(bmr){
var bmrweightvalue = document.getElementsByName('bmr_weight_pounds')[0].value;
var bmrweight = parseInt(bmrweightvalue, 10);
var macro_p = (bmrweight*1);
//window.alert("protein is: " + macro_p);
var macro_f = (bmrweight*.25);
//window.alert("Fats are: " + macro_f);
var macro_c = (bmr - (macro_p * 4 + macro_f * 9))/4;
//window.alert("carbs are: " + macro_c);
var contianer2 = document.getElementById("myprotein");
container2.innerHTML = macro_p;
var contianer3 = document.getElementById("myfat");
container3.innerHTML = macro_f;
var contianer4 = document.getElementById("mycarb");
container4.innerHTML = macro_c;
}
Console:
ReferenceError: Can't find variable: container2
calcmacrosrdnSimulator.html:435
onclickrdnSimulator.html:101
Line 435 is
var contianer2 = document.getElementById("myprotein");
as stated above

You are defining the container variables as contianer but then referring to them are container.
Change the variables to container and then it should work correctly.
var container2 = document.getElementById("myprotein");
container2.innerHTML = macro_p;
var container3 = document.getElementById("myfat");
container3.innerHTML = macro_f;
var container4 = document.getElementById("mycarb");
container4.innerHTML = macro_c;

You are calling a variable that doest exist. Check your syntax...
for example...
var contianer2 = document.getElementById("myprotein");
container2.innerHTML = macro_p;

Javascript - Passing from a DOM element to array [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
Hello and thank you for your time.
Here is the code :
<script>
var names = document.getElementsByClassName('xx');
var ar = [];
for (var i = 0, c = names.length ; i < c ; i++) {
ar[i] = names[i].innerHTML;
alert(ar[i]);// the results are : undefined
}
</script>`
I've tried to use the method tostring, or to push the results into the array but without success.
Thanks

Your main issue seems to be fixed. Make sure the DOM has been loaded before you try to run your code, and there is no need for two variables in your loop. Simplify it like below:
window.onload = function () {
var names = document.getElementsByClassName('xx');
var ar = [];
for (var i = 0 ; i < names.length ; i++) {
ar[i] = names[i].innerHTML;
alert(ar[i]);
}
};
Fiddle

ar.length equals 0, because you just declare the array, but dont put anything into it. I think what you wanted to do is the following:
var names = document.getElementsByClassName('xx');
var ar = [];
for (var i = 0 ; i < names.length ; i++) {
ar[i] = names[i].innerHTML;
alert(ar[i]);
}

Does my javascript contain repetitive code that can be reduced? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I feel like there is too much repetitive code going on here. All I am doing is doing a basic regex match for a string in the URL. If a match is found, I find an li with a class (.index, .grid, .type) and add the active class. This is just for my main nav in an attempt to make it some what dynamic. However, I feel like there is a more efficient way to code this. Any help is greatly appreciated.
$( document ).ready(function() {
var myLocation = window.location;
var convertURL = new String(myLocation);
var index = /index/i;
var grid = /grid/i;
var type = /type/i;
var urlIndex = convertURL.match(index);
var urlGrid = convertURL.match(grid);
var urlType = convertURL.match(type);
if(urlIndex) {
$('.index').addClass('active');
}else if(urlGrid) {
$('.grid').addClass('active');
}else if(urlType) {
$('.type').addClass('active');
}
});

$(function(){
["index", "grid", "type"].forEach(function(term){
if(new RegExp(term, "i").test(location.href))
$("." + term).addClass("active");
});
});

$(document).ready(function () {
// use single var per function, good for minimizing and other stuff
var
i,
// new string literal, not String object
convertURL = '' + window.location,
// the array of strings keeps only the difference from the repetitive code
classes = ['index', 'grid', 'type'],
// using functions with proper arguments reduces repetitivness
matches = function (regex) {
return convertURL.match(new RegExp(regex, 'i'));
}
// var
;
// always use += instead of ++ -> makes for clear intention
for (i = 0; i < classes.length; i += 1) {
if (matches(classes[i])) {
// returning out of this function stops iteration
return $('.' + classes[i]).addClass('active');
}
}
});