سلام
در حال طراحی یک قالب هستم که از کد های 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 فراخوانی نشده اجرا نشه و ارور رد نکنه
ممنون میشم راهنماییم کنید
یک راه حلش اینه که زمانی که میخواید 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);
}
};
یکی از مشکلاتی که هنگام کار با js یا جیکوری هست اینه که همیشه باید درحال چک کردن بودن یا نبودن المنت در DOM هستش ولی با وجود کتابخانه های خوبی مثه vue شما میتونی راحت این مشکلات رو هندل کنی.
@milad جان ارور Cannot read property 'top' of undefined رو میده و وقتی صفحه رو اسکرول کنی ارور ها تعدادشون هی بیشتر میشن
@mhyeganeh عزیز من توی جاوا اسکریپت ضعیفم در حال آموزش هستم منظورت رو متوجه نشدم ممنون میشم یکم توضیح بدی
@juza66 بله دوست عزیز اما این قالب بوت استرپ هست و من در جاوا اسکریپت مهارت ندارم متاسفانه
@mhyeganeh
فرض میکنیم که من حاصل این کد رو میخوام توی یک Div با آیدی Test اجرا کنم درست ؟
حالا چطور میشه یه دستور if و else نوشت که اگر مادر دارای آیدی Test نبود این کد اجرا نشه
مطمئنم اینطوری حل میشه
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟