Home > Software engineering >  While navigating HTML Elements with forEach, the getElementsByClassName function does not work on th
While navigating HTML Elements with forEach, the getElementsByClassName function does not work on th

Time:05-12

Let me try to explain, but you will understand better when you see the codes. I get my div elements with the getElementsByClassName function and then convert it to an array with the Array.from() function. While navigating this array with the forEach function, I am sending each element to a function. In this function, the item parameter represents my element. I can display this element with console.log(item) and even list its child elements with item.children. However, when I select this div with document.getElementById() using Inspect(F12) and then run the getElementsByClassName function only on this div, I do not get an error, but in the item.getElementsByClassName function I wrote in the html page, I get the error 'Uncaught TypeError: item.getELementsByClassName is not a function'.

I leave the code I wrote below. Error in registerClickOrdering function.

function registerClickHandler() {
          $('.remove_question_div').click(function() {
            var removedId = parseInt($(this).parent().attr('id').split('-').slice(-1))
            $(this).parent().remove();
            
            var questions = Array.from(document.getElementsByClassName('questions')).slice(removedId-1)
            console.log(questions)
            questions.forEach((item, index) => {registerClickOrdering(item, index)})
          });
        }

const registerClickOrdering = (item, index) => {
      console.log(item)
      item.id=`question_div-${index 2}`
      var questionCounterLbl = item.getELementsByClassName('question-counter')[0]
      questionCounterLbl.textContent = `${index 1}. Soru`
      var questionTitle = item.getELementsByClassName('question-title')[0]
      questionTitle.name = `question-${index 1}`
      questionTitle.id = `id_question-${index 1}`
      var answerInputs = Array.from(item.getELementsByClassName('answers-input'))
      answerInputs.forEach((item) => {
        item.name = `answer-${index 1}`
      })

    }

CodePudding user response:

You're doing everything right except for one, tiny thing that a linter could help you with in the future...

Change getELementsByClassName to getElementsByClassName

Happens to everyone at some point.

  • Related