मैंने जावास्क्रिप्ट में एक टाइपराइट एनीमेशन बनाया है लेकिन एक समस्या है, मेरे कंसोल ने मुझे हर बार रीसेट करने पर अगली त्रुटि फेंक दी: अनकॉटेड टाइपर्रर: स्टार्टटेक्स्टएनीमेशन पर अपरिभाषित की संपत्ति 'लंबाई' नहीं पढ़ सकता। मुझे आशा है कि आप यहां समस्या का पता लगाने में मेरी मदद कर सकते हैं। धन्यवाद

<h1 class="typewrite fontrielsa" style="color: rgba(0,0,0,.5); font-weight: 300 !important; margin-bottom: 25px;"></h1>

<style>

.cursorType {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}


</style>

<script>

    document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [ "MÁS DE 25 AÑOS DE EXPERIENCIA.", "EQUIPOS Y MATERIALES PARA LABORATORIO.", "DEPARTAMENTO DE INGENIERÍA.", "EMPRESA 100% MEXICANA."];

  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
     document.querySelector(".typewrite").innerHTML = text.substring(0, i+1) +'<span class="cursorType" aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 5000);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          StartTextAnimation(0);
        }, 1000);
     }
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
     });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});



</script>


0
Alain Vazquez Cid 18 जून 2020, 18:32

1 उत्तर

सबसे बढ़िया उत्तर

dataText[i] चेक के नीचे कोड का हिस्सा चलाया जा रहा है, भले ही अपरिभाषित चेक पास हो या विफल हो। आप इसे if/else में डालने का प्रयास कर सकते हैं जैसे:

function StartTextAnimation(i) {
  if (typeof dataText[i] == 'undefined'){
    // check if dataText[i] exists
    setTimeout(function() {
      StartTextAnimation(0);
    }, 1000);
  } else if (i < dataText[i].length) {
    // text exists! start typewriter animation
    typeWriter(dataText[i], 0, function(){
      // after callback (and whole text has been animated), start next text
      StartTextAnimation(i + 1);
    });
  }
}
0
Roger Cronin 18 जून 2020, 15:40