فرهاد
4 سال پیش توسط فرهاد مطرح شد
6 پاسخ

مشکل در سازماندهی کدهای جاوا اسکریپت در طراحی قالب

سلام

در حال طراحی یک قالب هستم که از کد های JS و Jquary مختلف استفاده کردم اما برای مثال یک کد به شکل زیر که برای انیمیشن تایپ متن هست زمانی که در یک صفحه فراخوانی بشه هیچ مشکلی نداره اما زمانی که در صفحات داخلی به کار برده نمیشه و بهش احتیاجی نیست به صورت ارور در Inspect مرورگر ظاهر میشه و در بعضی از صفحات هم در باقی کد ها اختلال ایجاد میکنه

// texttyper

const TextTyper = function (txtElement, words, wait = 3000) {
  this.txtElement = txtElement;
  this.words = words;
  this.txt = '';
  this.wordIndex = 0;
  this.wait = parseInt(wait, 10);
  this.type();
  this.isDeleting = false;
}
TextTyper.prototype.type = function () {
  // Current index of word
  const current = this.wordIndex % this.words.length;
  // Get text of current word
  const fullTxt = this.words[current];

  // Check if deleting word
  if (this.isDeleting) {
    // remove character
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    // add character
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.txtElement.innerHTML = `<span>${this.txt}</span>`

  // Initial Type Speed
  let typeSpeed = 100;
  if (this.isDeleting) {
    typeSpeed /= 2;
  }

  // if word is complete
  if (!this.isDeleting && this.txt === fullTxt) {
    typeSpeed = this.wait;
    // set delete to true
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    // move to next word
    this.wordIndex++;
    // pause before start typing
    typeSpeed = 500;
  }

  setTimeout(() => this.type(), typeSpeed)
}
// Init on DOM Load
document.addEventListener('DOMContentLoaded', init);
function init() {
  const txtElement = document.querySelector('.txt-type');
  const words = JSON.parse(txtElement.getAttribute('data-words'));
  const wait = txtElement.getAttribute('data-wait');
  // Init text typer
  new TextTyper(txtElement, words, wait);
};

میخواستم بدونم چطور میتونم این مدل کد ها رو شرطی کنم که زمانی که در HTML فراخوانی نشده اجرا نشه و ارور رد نکنه

ممنون میشم راهنماییم کنید


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
1

چه خطایی رخ میده؟ متن خطا چیه؟


محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش آپدیت شد
2

یک راه حلش اینه که زمانی که میخواید instance بسازید قبلش با if چک کنید که آیا المنت مورد نظر وجود داره در DOM یا نه. در مثال شما فکر کنم باید کلاس txt-type رو چک کنید. یعنی یک چیزی مثل این:

function init() {
  const txtElement = document.querySelector('.txt-type');
  const words = JSON.parse(txtElement.getAttribute('data-words'));
  const wait = txtElement.getAttribute('data-wait');

  if(txtElement) {
    // Init text typer
    new TextTyper(txtElement, words, wait);
  }

};

سیدعلی موسوی
تخصص : سی شارپ و پی اچ پی
@juza66 4 سال پیش مطرح شد
1

یکی از مشکلاتی که هنگام کار با js یا جیکوری هست اینه که همیشه باید درحال چک کردن بودن یا نبودن المنت در DOM هستش ولی با وجود کتابخانه های خوبی مثه vue شما میتونی راحت این مشکلات رو هندل کنی.


فرهاد
@salvator3e 4 سال پیش مطرح شد
0

@milad جان ارور Cannot read property 'top' of undefined رو میده و وقتی صفحه رو اسکرول کنی ارور ها تعدادشون هی بیشتر میشن

@mhyeganeh عزیز من توی جاوا اسکریپت ضعیفم در حال آموزش هستم منظورت رو متوجه نشدم ممنون میشم یکم توضیح بدی

@juza66 بله دوست عزیز اما این قالب بوت استرپ هست و من در جاوا اسکریپت مهارت ندارم متاسفانه


فرهاد
@salvator3e 4 سال پیش مطرح شد
0

@mhyeganeh
فرض میکنیم که من حاصل این کد رو میخوام توی یک Div با آیدی Test اجرا کنم درست ؟
حالا چطور میشه یه دستور if و else نوشت که اگر مادر دارای آیدی Test نبود این کد اجرا نشه
مطمئنم اینطوری حل میشه


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 4 سال پیش مطرح شد
0

دوستان به خوبی نوشتن براتون. دقیقا تونستن مشکل رو شناسایی کنند.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام