Update div id using dynamic variable in javascript [closed] - javascript

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 8 years ago.
Improve this question
I thought that this would be easy but this does not work, though it doesn't give an error either.
I have some text on my web page with id's display1, display2, display3....
When I try to update them in a loop like this nothing happens.
for (i = 1; i < 4; i++){
('display' + i).innerHTML = "123";
}
What am I doing wrong? Is there a better way of doing this?

Try
for (i = 1; i < 4; i++){
document.getElementById('display' + i).innerHTML = "123";
}
Or (better practice), I recommend you give all your display elements one class name and
displays=document.getElementsByClassName('newClassNameOfDisplays');
for (i = 1; i < displays.length+1; i++){
displays[i].innerHTML = "123";
}
Your code didn't work because String().innerHTML doesn't exist, you had to get the element from the DOM rather than create a string. :)

The answers given in the comments are probably both correct (not sure why they weren't posted as answers). What is happening in your code is that you are creating a string (('display')+i), and then creating a new property called innerHTML on that string, and then setting the value of the new innerHTML property to "".
The reason this doesn't give an error is that (almost) everything in JavaScript is an object, and you can set properties on objects at will. For example ("Hello").description="a greeting" is a perfectly valid JavaScript statement.

In your code you're not properly selecting the elements, try this:
for (var i = 1; i < 4; i++) {
document.getElementById('display' + i).innerHTML = '123';
}
JSFiddle Example
http://jsfiddle.net/tLPkj/3/

Related

Issues with displaying certain array elements with a conditional in javascript [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 2 years ago.
Improve this question
I'm trying to use a for loop to display all the elements in my array that are greater than 5. I am using an if-statement to determine the values greater than five, but when I run the code, I get values printed to the console that are both below and over five. I have tried creating variables to store the index values and tried using the && operator, but none of these have worked.
Here is the code for reference:
var myArray = [];
appendItem(myArray, randomNumber(1,10));
appendItem(myArray, randomNumber(1,10));
appendItem(myArray, randomNumber(1,10));
console.log("Original: " + myArray);
console.log("Values greater than 5");
// the part I have issues with
for (var i = 0; i < myArray.length; i++) {
if (myArray[i] > 5) {
console.log(i);
}
}
You are printing i not the array element.
try
console.log(myArray[i]);

Following a tutorial, cant figure out my javascript syntax mistake [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 change all instances of the word "cão" on a page to read "gato" (following an older tutorial).
All instances of "cão" are inside a span and I´m trying to change them by using getElementsByTagName method.
Since there more than one, I cant use innerHTML to change the content so I´m using a for loop to cycle through all positions but I´m getting a sytax error after the increment i++. Why is that?
var elementoHeading = document.getElementById('heading');
elementoHeading.innerHTML = "Tudo sobre gatos";
var nomesTags = document.getElementsByTagName("span");
for (var i = 0, i < nomesTags.length, i++) {
nomesTags[i].innerHTML = "gato";
}
Use semicolons, not commas, in the for construct:
for (var i = 0; i < nomesTags.length; i++) {
^ ^
The reason the syntax error is after the increment is because the JS engine expects 3 statements inside of the for's brackets, but you only gave one (commas don't terminate the statement).

getElementById("...").className is null when trying to use string+variable as id [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 7 years ago.
Improve this question
I managed to have code to change class for button with function when conditions met. Problem is I don't want to repeat this for all the elements, but it doesn't work when using document.getElementById('buy'+gen) instead of document.getElementById('buyhotdog'). I will provide below the "working code" and the code I tried to get working.
Working code:
function changeButtonHD() {
if (money < hotdog.cost) {
document.getElementById('buyhotdog').className = 'buttongrey';
}
else {
document.getElementById('buyhotdog').className = 'button';
}
}
and it works with: changeButtonHD(); in interval that activates with window.onload.
Non-working code:
function changeButtonBC(gen) {
if (money < gen.cost) {
document.getElementById('buy'+gen).className = 'buttongrey';
}
else {
document.getElementById('buy'+gen).className = 'button';
}
}
And I tried to get it to work with changeButtonHD(hotdog);
Here: gen.cost you show that gen is an object with a property called cost.
Here: 'buy'+gen you use get as if it was a string. Unless you've overridden .toString() then it will be "[object Object]" which is not "hotdog".
You seem to be trying to use the name of the variable that originally held the value you passed to changeButtonHD, but you can't (because you passed its value and not its name).
Make "hotdog" the value of a property on that object, then use 'buy' + gen.name.
gen type is object, so if you wanna to get gen value, your gen variable format should like this
gen = {cost =1000, value=hotdog} //here an example of your data
function changeButtonBC(gen) {
if (money < gen.cost) {
document.getElementById('buy'+gen.value).className = 'buttongrey';
}
else {
document.getElementById('buy'+gen.value).className = 'button';
}
}

Why do I have an infinite 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 8 years ago.
Improve this question
I'm learning javascript and I don't understand why this code is creating an infinite loop.
for (var i = 8 ; i < 120; i+12) {
console.log(i * 1);
}
If I make an assignment of i like i = i + 12 then everything works like it should. Please explain what is going on here.
You'll learn that JavaScript does some wonky and questionable things...
I've never seen a use-case with the parameters you've set with a for loop, but I'm assuming you know the defaults.
Anyway, what you are doing is not increment i by 12, so it will continue to loop, given i never actually increases.
The operator += should do the trick, as it will take the previous value of i, and add 12 to it.
You need i += 12 to do assignment instead of just i + 12 (which is a plain expression).
because i+12 does not increment and store the incremented value in i. So the value of i is always 8. Wheras i=i+12 increments and stores the value in i and the loop terminates when i >= 120.
you need to use i+=12 Check out the operators of JavaScript
for (var i = 8 ; i < 120; i +=12) {
console.log(i * 1);
}

How can I get a count of all elements with a style starting with "string" [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 8 years ago.
Improve this question
So I am using the following jQuery to get a count of all items in HTML with a class containing box. However it is not returning correctly, I feel like I'm missing something stupid.
var counter = $("*[class^=box]").length;
JSFiddle for example: jsfiddle
This link should return 1, but it returns 0.
EDIT:
It was a stupid mistake:I was previously using ID which was only going to be box1,box2,box3,etc so it made sense then. I knew it was stupid.
var counter = $("*[class=box]").length;
The "attribute starts with selector" matches the attribute, not neccesarely the classname
That means that this will match the selector
<div class="box0 emailbodytext" ...
as the attribute starts with "box", while this won't
<div class="emailbodytext box0" ...
as the attribute does not start with "box", even if one of the classes do
Here's one way to solve it
var counter = $('*').filter(function() {
return this.className.split(/\s+/).filter(function(klass){
return klass.indexOf('box') === 0;
}).length;
}).length;
FIDDLE
Your selector basically checks for elements that their class attribute starts with 'box'.
Your have more than one class name in your class attribute so you need to use 'contains' instead of 'starts with'.
Example:
var counter = $("*[class*=box]").length;

Categories