Uncaught TypeError: topics.forEach is not a function












-1















I was trying to get an output of my array.



document.addEventListener("DOMContentLoaded", function() {

document.getElementById('button').addEventListener('click', function() {

    var sidebar = document.getElementById('sidebar');



    var isExpanded = false;

    sidebar.classList.forEach(function(className) {

        if (className == 'expand') {

            isExpanded = true;

        }

    });



    if (isExpanded) {

        sidebar.classList.remove('expand');

    } else {

        sidebar.classList.add('expand');

    }



    isExpanded = !isExpanded;







    var contentwrapper = document.getElementById('content-wrapper');





    if (isExpanded) {

        contentwrapper.classList.add('padding-offset-2');



    } else {

        contentwrapper.classList.remove('padding-offset-2');

    }





    var topics = document.getElementById("content-wrapper").children;

    console.log(topics);

    topics.forEach(function(topic) {



        console.log(topic);



    })



});


I am getting the error, that topics.forEach is not a function. Can someone help me with that? I have no clue what I am doing wrong. I am trying to learn JS atm. :)






javascript







share|improve this question







New contributor




Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





















  • Please fix your code

    – Islam Elshobokshy
    yesterday











  • Give us the output of your console.log(topics); I assume that your topics is not an array.

    – holydragon
    yesterday











  • You're trying to iterate through a list of children that don't exist. You could make the code typesafe and declare topics && topics.forEach but either way your application is pointless, crashed due to type error or not.

    – Joseph Persie
    yesterday
















-1















I was trying to get an output of my array.



document.addEventListener("DOMContentLoaded", function() {

document.getElementById('button').addEventListener('click', function() {

    var sidebar = document.getElementById('sidebar');



    var isExpanded = false;

    sidebar.classList.forEach(function(className) {

        if (className == 'expand') {

            isExpanded = true;

        }

    });



    if (isExpanded) {

        sidebar.classList.remove('expand');

    } else {

        sidebar.classList.add('expand');

    }



    isExpanded = !isExpanded;







    var contentwrapper = document.getElementById('content-wrapper');





    if (isExpanded) {

        contentwrapper.classList.add('padding-offset-2');



    } else {

        contentwrapper.classList.remove('padding-offset-2');

    }





    var topics = document.getElementById("content-wrapper").children;

    console.log(topics);

    topics.forEach(function(topic) {



        console.log(topic);



    })



});


I am getting the error, that topics.forEach is not a function. Can someone help me with that? I have no clue what I am doing wrong. I am trying to learn JS atm. :)






javascript







share|improve this question







New contributor




Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





















  • Please fix your code

    – Islam Elshobokshy
    yesterday











  • Give us the output of your console.log(topics); I assume that your topics is not an array.

    – holydragon
    yesterday











  • You're trying to iterate through a list of children that don't exist. You could make the code typesafe and declare topics && topics.forEach but either way your application is pointless, crashed due to type error or not.

    – Joseph Persie
    yesterday














-1












-1








-1








I was trying to get an output of my array.



document.addEventListener("DOMContentLoaded", function() {

document.getElementById('button').addEventListener('click', function() {

    var sidebar = document.getElementById('sidebar');



    var isExpanded = false;

    sidebar.classList.forEach(function(className) {

        if (className == 'expand') {

            isExpanded = true;

        }

    });



    if (isExpanded) {

        sidebar.classList.remove('expand');

    } else {

        sidebar.classList.add('expand');

    }



    isExpanded = !isExpanded;







    var contentwrapper = document.getElementById('content-wrapper');





    if (isExpanded) {

        contentwrapper.classList.add('padding-offset-2');



    } else {

        contentwrapper.classList.remove('padding-offset-2');

    }





    var topics = document.getElementById("content-wrapper").children;

    console.log(topics);

    topics.forEach(function(topic) {



        console.log(topic);



    })



});


I am getting the error, that topics.forEach is not a function. Can someone help me with that? I have no clue what I am doing wrong. I am trying to learn JS atm. :)






javascript







share|improve this question







New contributor




Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












I was trying to get an output of my array.



document.addEventListener("DOMContentLoaded", function() {

document.getElementById('button').addEventListener('click', function() {

    var sidebar = document.getElementById('sidebar');



    var isExpanded = false;

    sidebar.classList.forEach(function(className) {

        if (className == 'expand') {

            isExpanded = true;

        }

    });



    if (isExpanded) {

        sidebar.classList.remove('expand');

    } else {

        sidebar.classList.add('expand');

    }



    isExpanded = !isExpanded;







    var contentwrapper = document.getElementById('content-wrapper');





    if (isExpanded) {

        contentwrapper.classList.add('padding-offset-2');



    } else {

        contentwrapper.classList.remove('padding-offset-2');

    }





    var topics = document.getElementById("content-wrapper").children;

    console.log(topics);

    topics.forEach(function(topic) {



        console.log(topic);



    })



});


I am getting the error, that topics.forEach is not a function. Can someone help me with that? I have no clue what I am doing wrong. I am trying to learn JS atm. :)






javascript




javascript






share|improve this question







New contributor




Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question







New contributor




Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question






New contributor




Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked yesterday









KravosKravos

81




81




New contributor




Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






Kravos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.













  • Please fix your code

    – Islam Elshobokshy
    yesterday











  • Give us the output of your console.log(topics); I assume that your topics is not an array.

    – holydragon
    yesterday











  • You're trying to iterate through a list of children that don't exist. You could make the code typesafe and declare topics && topics.forEach but either way your application is pointless, crashed due to type error or not.

    – Joseph Persie
    yesterday



















  • Please fix your code

    – Islam Elshobokshy
    yesterday











  • Give us the output of your console.log(topics); I assume that your topics is not an array.

    – holydragon
    yesterday











  • You're trying to iterate through a list of children that don't exist. You could make the code typesafe and declare topics && topics.forEach but either way your application is pointless, crashed due to type error or not.

    – Joseph Persie
    yesterday

















Please fix your code

– Islam Elshobokshy
yesterday





Please fix your code

– Islam Elshobokshy
yesterday













Give us the output of your console.log(topics); I assume that your topics is not an array.

– holydragon
yesterday





Give us the output of your console.log(topics); I assume that your topics is not an array.

– holydragon
yesterday













You're trying to iterate through a list of children that don't exist. You could make the code typesafe and declare topics && topics.forEach but either way your application is pointless, crashed due to type error or not.

– Joseph Persie
yesterday





You're trying to iterate through a list of children that don't exist. You could make the code typesafe and declare topics && topics.forEach but either way your application is pointless, crashed due to type error or not.

– Joseph Persie
yesterday












3 Answers
3






active

oldest

votes


















1














var topics = document.getElementById("content-wrapper").children;


topics is an HTMLCollection, not an array, and therefore does not have a forEach() method. You need to convert it to an array first.






share|improve this answer



















  • 1





    Thank you very much! That solved me problem!

    – Kravos
    yesterday



















1














 var topics = document.getElementById("content-wrapper").children;

   console.log(topics);


topics give collection of HTMLCollection, Convert it to array.



see this Most efficient way to convert an HTMLCollection to an Array



  var topics= .slice.call(topics);





share|improve this answer
























  • Thank you very much! That solved me problem!

    – Kravos
    yesterday



















0














For each would not work.
try using class for the selector.



$.each( topic, function( key, value ) {

  alert( key + ": " + value );

 // do your stuff here

});


OR



$(".content-wrapper").each(function() {

  // do your stuff here

});





share|improve this answer
























  • Learning JS doesn't mean learning jquery :'(

    – Kravos
    21 hours ago











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});






Kravos is a new contributor. Be nice, and check out our Code of Conduct.










draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54251085%2funcaught-typeerror-topics-foreach-is-not-a-function%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























3 Answers
3






active

oldest

votes








3 Answers
3






active

oldest

votes









active

oldest

votes






active

oldest

votes









1














var topics = document.getElementById("content-wrapper").children;


topics is an HTMLCollection, not an array, and therefore does not have a forEach() method. You need to convert it to an array first.






share|improve this answer



















  • 1





    Thank you very much! That solved me problem!

    – Kravos
    yesterday
















1














var topics = document.getElementById("content-wrapper").children;


topics is an HTMLCollection, not an array, and therefore does not have a forEach() method. You need to convert it to an array first.






share|improve this answer



















  • 1





    Thank you very much! That solved me problem!

    – Kravos
    yesterday














1












1








1







var topics = document.getElementById("content-wrapper").children;


topics is an HTMLCollection, not an array, and therefore does not have a forEach() method. You need to convert it to an array first.






share|improve this answer













var topics = document.getElementById("content-wrapper").children;


topics is an HTMLCollection, not an array, and therefore does not have a forEach() method. You need to convert it to an array first.







share|improve this answer












share|improve this answer



share|improve this answer










answered yesterday









CinnCinn

977725




977725








  • 1





    Thank you very much! That solved me problem!

    – Kravos
    yesterday














  • 1





    Thank you very much! That solved me problem!

    – Kravos
    yesterday








1




1





Thank you very much! That solved me problem!

– Kravos
yesterday





Thank you very much! That solved me problem!

– Kravos
yesterday













1














 var topics = document.getElementById("content-wrapper").children;

   console.log(topics);


topics give collection of HTMLCollection, Convert it to array.



see this Most efficient way to convert an HTMLCollection to an Array



  var topics= .slice.call(topics);





share|improve this answer
























  • Thank you very much! That solved me problem!

    – Kravos
    yesterday
















1














 var topics = document.getElementById("content-wrapper").children;

   console.log(topics);


topics give collection of HTMLCollection, Convert it to array.



see this Most efficient way to convert an HTMLCollection to an Array



  var topics= .slice.call(topics);





share|improve this answer
























  • Thank you very much! That solved me problem!

    – Kravos
    yesterday














1












1








1







 var topics = document.getElementById("content-wrapper").children;

   console.log(topics);


topics give collection of HTMLCollection, Convert it to array.



see this Most efficient way to convert an HTMLCollection to an Array



  var topics= .slice.call(topics);





share|improve this answer













 var topics = document.getElementById("content-wrapper").children;

   console.log(topics);


topics give collection of HTMLCollection, Convert it to array.



see this Most efficient way to convert an HTMLCollection to an Array



  var topics= .slice.call(topics);






share|improve this answer












share|improve this answer



share|improve this answer










answered yesterday









sridhar..sridhar..

971610




971610













  • Thank you very much! That solved me problem!

    – Kravos
    yesterday



















  • Thank you very much! That solved me problem!

    – Kravos
    yesterday

















Thank you very much! That solved me problem!

– Kravos
yesterday





Thank you very much! That solved me problem!

– Kravos
yesterday











0














For each would not work.
try using class for the selector.



$.each( topic, function( key, value ) {

  alert( key + ": " + value );

 // do your stuff here

});


OR



$(".content-wrapper").each(function() {

  // do your stuff here

});





share|improve this answer
























  • Learning JS doesn't mean learning jquery :'(

    – Kravos
    21 hours ago
















0














For each would not work.
try using class for the selector.



$.each( topic, function( key, value ) {

  alert( key + ": " + value );

 // do your stuff here

});


OR



$(".content-wrapper").each(function() {

  // do your stuff here

});





share|improve this answer
























  • Learning JS doesn't mean learning jquery :'(

    – Kravos
    21 hours ago














0












0








0







For each would not work.
try using class for the selector.



$.each( topic, function( key, value ) {

  alert( key + ": " + value );

 // do your stuff here

});


OR



$(".content-wrapper").each(function() {

  // do your stuff here

});





share|improve this answer













For each would not work.
try using class for the selector.



$.each( topic, function( key, value ) {

  alert( key + ": " + value );

 // do your stuff here

});


OR



$(".content-wrapper").each(function() {

  // do your stuff here

});






share|improve this answer












share|improve this answer



share|improve this answer










answered yesterday









AshutoshAshutosh

109111




109111













  • Learning JS doesn't mean learning jquery :'(

    – Kravos
    21 hours ago



















  • Learning JS doesn't mean learning jquery :'(

    – Kravos
    21 hours ago

















Learning JS doesn't mean learning jquery :'(

– Kravos
21 hours ago





Learning JS doesn't mean learning jquery :'(

– Kravos
21 hours ago










Kravos is a new contributor. Be nice, and check out our Code of Conduct.










draft saved

draft discarded


















Kravos is a new contributor. Be nice, and check out our Code of Conduct.













Kravos is a new contributor. Be nice, and check out our Code of Conduct.












Kravos is a new contributor. Be nice, and check out our Code of Conduct.
















Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54251085%2funcaught-typeerror-topics-foreach-is-not-a-function%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Liquibase includeAll doesn't find base path

Image
0 while migrating a project from maven to gradle I ran in the following problem. My file structure looks like this: The changelog-master.xml includes the changelog-v1-0.xml, which then should include the directory v1-0 with following line: <includeAll path="src/main/resources/liquibase/changelogs/v1-0/" errorIfMissingOrEmpty="true" /> . This works just fine. This: <includeAll path="/liquibase/changelogs/v1-0/" errorIfMissingOrEmpty="true" relativeToChangelogFile="true" /> doesn't. I get following errormessage: Cannot find base path 'src/main/resources/liquibase/changelogs/changelog-v1-0.xml' with liquibase in version 3.6.2. I also tried the versions 3.6.0, 3.6.1 and 3.5.5. I am using gradle to build my project in version 4.9
Read more

How to use setInterval in EJS file?

Image
0 I have a problem with using setInterval in my EJS file, which is part of my nodejs app (with Express). I have created function getRandomSubarray , which chooses randomly subset of images from array. I want to change this subset every three seconds. This is problematic piece of my code: <%setInterval(function(){%> <%RandomSubrecipesImg=tools.getRandomSubarray(recipesImg,4)%> <div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[0].replace('public',"")%>"></div> <div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[1].replace('public',"")%>">&
Read more

Petrus Granier-Deferre

Image
Petrus Granier-Deferre (Lutetiae die 27 Iulii 1927 natus; ibidem die 16 Novembris 2007 mortuus) fuit moderator cinematographicus et dux scaenarum Francicus. Pelliculae selectae | 1961 : Le Petit Garçon de l'ascenseur 1962 : Les Aventures de Salavin (sous-titré Confession de minuit) 1965 : La Métamorphose des cloportes 1965 : Paris au mois d'août 1967 : Le Grand Dadais 1970 : La Horse 1971 : Le Chat 1971 : La Veuve Couderc 1973 : Le Fils 1973 : Le Train 1974 : La Race des seigneurs 1975 : La Cage 1975 : Adieu poulet 1976 : Une femme à sa fenêtre 1976 : Le Toubib 1981 : Une étrange affaire 1982 : L'Étoile du Nord 1983 : L'Ami de Vincent 1985 : L'Homme aux yeux d'argent 1986 : Cours privé 1987 : Noyade interdite 1988 : La Couleur du vent 1990 : L'Autrichienne 1995 : Le Petit Garçon 1992 : La Voix 1993 : Archipel 1995 : Maigret et la vente à la bougie (TV) 1996 : La Dernière Fête (TV) 1997 : Maigret et l'enfant de c
Read more