'Uncaught TypeError : undefined가 함수가 아닙니다.'다른 코드 행에 계속 표시됩니다.

Question

텍스트 세트를 가져 오려고하는데 버튼을 누르면 다른 텍스트 세트로 변경됩니다. 나는 많은 다른 방법을 시도해 왔고 그것이 작동하도록 할 수없는 것처럼 보입니다. 다음은 작동하는 Jsfiddle입니다.

나는 점점 계속 :

var $rep = $update.textContent.substring(1); 

내가 코드 줄을 변경 한 라인에 대한 'catch되지 않은 형식 오류 정의되지 않은 함수 아니다',하지만하여 내 코드의 다른 줄에 같은 오류가 발생합니다 같은 기능.

function createAnswers() { 
    var i; 
    for (i = 0; i < 4; i++) { 
     var $update = $(".answers p")[i]; 
     var $rep = $update.textContent.substring(1); 
     console.log($rep); 
     var answerText = document.createTextNode(randomImage.randomAnswers[i]); 
     if (usedImages.length >= 1) { 
      $rep.replaceWith(answerText); 
     } 
      $update.appendChild(answerText); 
    } 
} 

저는 아직 Javascript에서 매우 새롭기 때문에 매우 분명한 것을 놓치고있을 수 있습니다. 건설적인 비판이 도움이 될 것입니다. $ 업데이트가 DOM 노드되기 때문에 당신은 var $update = $(".answers p")[i]; 후 jQuery를 기능을 사용할 필요가 없습니다

function createAnswers() { 
    var i, 
     $answers = $(".answers p"); 

    for (i = 0; i < 4; i++) { 
     var $update = $answers[i]; 
     var $rep = $update.textContent.substring(1); 
     var answerText = document.createTextNode(randomImage.randomAnswers[i]); 

     if (usedImages.length >= 1) { 
      $update.textContent = $update.textContent.replace($rep, answerText.textContent); 
     } 

     $update.appendChild(answerText); 
    } 
} 

: 같은

Answer 1

함수가 보일 것입니다.

Answer 2

나는 그것을 알아 냈다. 모두에게 도움을 주셔서 감사합니다. 나는 텍스트 노드의 사용을 지정하고 텍스트 노드를 직접 업데이트해야한다는 것을 깨달았다. 마지막 코드는 다음과 같습니다.

function createAnswers() { 
    var i, 
     $update; 

    for (i = 0; i < 4; i++) { 
     $update = $(".answers p")[i]; 
     console.log($update); 
     var answerText = document.createTextNode(randomImage.randomAnswers[i]); 
     if (usedImages.length === 0) { 
      $update.appendChild(answerText); 
     } 
     else { 
      $update.childNodes[1].nodeValue = randomImage.randomAnswers[i]; 
     } 
    } 
}