Блог

Главная - Вопросы по программированию - Мой DIV не работает должным образом с моей анимацией JS, какие изменения я должен сделать?

Мой DIV не работает должным образом с моей анимацией JS, какие изменения я должен сделать?

#javascript #html #jquery #css #animation

#javascript #HTML #jquery #css #Анимация

Вопрос:

У меня есть простой сценарий анимации JS, хорошо, здесь мой скрипт получает данные <div class="quiz"> Some content </div> для анимации. и да, когда я добавляю свой HTML-код, анимация и все функции, такие как предыдущий и следующий, работают правильно, точно так же, как эта проверка:

 var question = 0;

var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {
  carry.push(item.textContent.trim())
  return carry;
}, []);

var anim;
var targets;

function prepQuestion() {
  $("#rect").text(questions[question]);

  var textWrappers = document.querySelectorAll('#rect');
  textWrappers.forEach(textWrapper => {
    textWrapper.innerHTML = textWrapper.textContent.replace(/(S*)/g, m => {
      return `<span class="word">`  
        m.replace(/(-|)?S(-|@)?/g, "<span class='letter'>$amp;</span>")  
        `</span>`;
    });
  });

  targets = Array.from(document.querySelectorAll('#rect .letter'));

  anim = anime.timeline()
    .add({
      targets: targets,
      scale: [3, 1],
      scaleY: [1.5, 1],
      opacity: [0, 1],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 150,
      delay: (el, i) => 20 * i
    });
}

// init
prepQuestion();

function next() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 50,
      delay: (el, i) => 10 * i
    });

  anim.complete = () => {
    if (question == questions.length - 1) {
      question = 0;
    } // reset question
    else {
      question  ;
    }

    prepQuestion();
  };
}

function previous() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 50,
      delay: (el, i) => 10 * i
    });

  anim.complete = () => {
    if (question == 0) {
      question = questions.length - 1;
    } // reset question
    else {
      question--;
    }

    prepQuestion();
  };
} 
 #rect {
  font-weight: 900;
  font-size: 2.5em;
  font-family: rr;
}

#rect .letter {

  line-height: 1em;
}

#quizss {
display:none;
}

.word {
  white-space: nowrap;
} 
 <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="quiz">Question-1 : The color of !the sky is...?</div>
<div class="quiz">Question-2 : Paper comes from...?</div>
<div class="quiz">Question-3 : How many hours in a day?</div>
<div class="quiz">Question-4 : A Giraffe is a fish?</div>


<div id="rect"></div>


<br>
<Button id="rc" onclick="previous()">previous</Button>
<Button id="rc" onclick="next()">Next</Button>

<br>

хорошо, теперь я создал вот текстовое поле, которое динамически создает эти типы div, когда я ввожу несколько строк в текстовое поле и нажимаю кнопку «добавить текст», а затем

<div class="quiz"> Some content </div>

<div class="quiz"> Some content Line 2</div>

<div class="quiz"> Some content Line 3 </div>

создается динамически на странице, но это не работает в функции анимации JS, почему?

Посмотрите на это изображение : введите описание изображения здесь

просто проверьте это, добавив несколько строк в это текстовое поле.

Мой код текстового поля находится здесь:

 const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('rect');
var message = textArea.value;

sendButton.addEventListener('click', function() {
  // split the textarea entries into an array
  let lines = (textArea.value).split("n");

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = `<div class="quiz">${encodedLine}</div>`;
    innerDiv.innerHTML  = newElement;
  });
  
  // reset the textarea
  textArea.value = '';

});

function encodeHtmlEntity(input) {
  var output = input.replace(/[u00A0-u9999<>amp;]/gim, function(i) {
    return 'amp;#'   i.charCodeAt(0)   ';';
  });

  return output;
} 
 <div id="rect"> </div>

<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">Send</button>

и теперь весь мой код с анимацией JS и текстовым полем находится здесь: я пробовал это, но он не работает с данными текстового поля.
Означает, что моя цель состоит в том, что я хочу использовать эти данные текстового поля также с анимацией js так же, как я использую <div class="quiz"> Some question content </div> , поэтому, пожалуйста, помогите мне, как это возможно.

 // JS animation script start here

var question = 0;

var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {
  carry.push(item.textContent.trim())
  return carry;
}, []);

var anim;
var targets;

function prepQuestion() {
  $("#rect").text(questions[question]);

  var textWrappers = document.querySelectorAll('#rect');
  textWrappers.forEach(textWrapper => {
    textWrapper.innerHTML = textWrapper.textContent.replace(/(S*)/g, m => {
      return `<span class="word">`  
        m.replace(/(-|)?S(-|@)?/g, "<span class='letter'>$amp;</span>")  
        `</span>`;
    });
  });

  targets = Array.from(document.querySelectorAll('#rect .letter'));

  anim = anime.timeline()
    .add({
      targets: targets,
      scale: [3, 1],
      scaleY: [1.5, 1],
      opacity: [0, 1],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 150,
      delay: (el, i) => 20 * i
    });
}

// init
prepQuestion();

function next() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 50,
      delay: (el, i) => 10 * i
    });

  anim.complete = () => {
    if (question == questions.length - 1) {
      question = 0;
    } // reset question
    else {
      question  ;
    }

    prepQuestion();
  };
}

function previous() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 50,
      delay: (el, i) => 10 * i
    });

  anim.complete = () => {
    if (question == 0) {
      question = questions.length - 1;
    } // reset question
    else {
      question--;
    }

    prepQuestion();
  };
}
  // JS animation script end here

  // textarea script start here

const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('rect');
var message = textArea.value;

sendButton.addEventListener('click', function() {
  // split the textarea entries into an array
  let lines = (textArea.value).split("n");

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach( (line) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = `<div class="quiz">${encodedLine}</div>`;
    innerDiv.innerHTML  = newElement;
  });
  
  // reset the textarea
  textArea.value = '';

});

function encodeHtmlEntity(input) {
  var output = input.replace(/[u00A0-u9999<>amp;]/gim, function(i) {
    return 'amp;#'   i.charCodeAt(0)   ';';
  });

  return output;
} 
 <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <style>
                #rect {
  font-weight: 900;
  font-size: 1.5em;
  font-family: rr;
}

#rect .letter {

  line-height: 1em;
}

#quizss {
display:none;
}

.word {
  white-space: nowrap;
}
    </style>
    
    





<div class="quiz">Question-1 : The color of !the sky is...?</div>
<div class="quiz">Question-2 : Paper comes from...?</div>
<div class="quiz">Question-3 : How many hours in a day?</div>
<div class="quiz">Question-4 : A Giraffe is a fish?</div>




<div id="rect"></div>

<br><br>
<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">Send</button>



<br><br>
<Button id="rc" onclick="previous()">previous</Button>
<Button id="rc" onclick="next()">Next</Button>

Комментарии:

1. на самом деле очень хороший вопрос

Ответ №1:

Две вещи:

  1. Вы добавили новую викторину внутри rect , которая не очень хороша. Создайте контейнер для всех тестов и добавьте его туда
  2. Вам нужно обновлять свои questions переменные каждый раз, когда вы добавляете новый тест
 // JS animation script start here

var question = 0;

var questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {
  carry.push(item.textContent.trim())
  return carry;
}, []);

var anim;
var targets;

function prepQuestion() {
  $("#rect").text(questions[question]);

  var textWrappers = document.querySelectorAll('#rect');
  textWrappers.forEach(textWrapper => {
    textWrapper.innerHTML = textWrapper.textContent.replace(/(S*)/g, m => {
      return `<span class="word">`  
        m.replace(/(-|)?S(-|@)?/g, "<span class='letter'>$amp;</span>")  
        `</span>`;
    });
  });

  targets = Array.from(document.querySelectorAll('#rect .letter'));

  anim = anime.timeline()
    .add({
      targets: targets,
      scale: [3, 1],
      scaleY: [1.5, 1],
      opacity: [0, 1],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 150,
      delay: (el, i) => 20 * i
    });
}

// init
prepQuestion();

function next() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 50,
      delay: (el, i) => 10 * i
    });

  anim.complete = () => {
    if (question == questions.length - 1) {
      question = 0;
    } // reset question
    else {
      question  ;
    }

    prepQuestion();
  };
}

function previous() {
  anim = anime.timeline()
    .add({
      targets: targets.reverse(),
      scale: [1, 3],
      scaleY: [1, 1.5],
      opacity: [1, 0],
      translateZ: 0,
      easing: "easeOutExpo",
      duration: 50,
      delay: (el, i) => 10 * i
    });

  anim.complete = () => {
    if (question == 0) {
      question = questions.length - 1;
    } // reset question
    else {
      question--;
    }

    prepQuestion();
  };
}
// JS animation script end here

// textarea script start here

const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('rect');
const container = document.getElementById('q-container');
var message = textArea.value;

sendButton.addEventListener('click', function() {
  // split the textarea entries into an array
  let lines = (textArea.value).split("n");

  // iterate over each line, creating a div/span and inserting into the DOM
  lines.forEach((line) => {
    let encodedLine = encodeHtmlEntity(line);
    let newElement = `<div class="quiz">${encodedLine}</div>`;
    container.innerHTML  = newElement;
    questions = Array.from(document.getElementsByClassName("quiz")).reduce((carry, item) => {
      carry.push(item.textContent.trim())
      return carry;
    }, []);
  });

  // reset the textarea
  textArea.value = '';

});

function encodeHtmlEntity(input) {
  var output = input.replace(/[u00A0-u9999<>amp;]/gim, function(i) {
    return 'amp;#'   i.charCodeAt(0)   ';';
  });

  return output;
} 
   #rect {
    font-weight: 900;
    font-size: 1.5em;
    font-family: rr;
  }
  
  #rect .letter {
    line-height: 1em;
  }
  
  #quizss {
    display: none;
  }
  
  .word {
    white-space: nowrap;
  } 
 <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="q-container">
<div class="quiz">Question-1 : The color of !the sky is...?</div>
<div class="quiz">Question-2 : Paper comes from...?</div>
<div class="quiz">Question-3 : How many hours in a day?</div>
<div class="quiz">Question-4 : A Giraffe is a fish?</div>
</div>

<div id="rect"></div>

<br><br>
<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">Send</button>

<br><br>
<Button id="rc" onclick="previous()">previous</Button>
<Button id="rc" onclick="next()">Next</Button>