I am having an issue with my DIV not functioning correctly in conjunction with my JS animation. What modifications should I make to

Question

I am having an issue with my DIV not functioning correctly in conjunction with my JS animation. What modifications should I make to

I have a simple JS animation script that fetches data from the

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

for animation. When I include this script in my HTML, the animation and other functions such as previous and next work properly. See an example below:

// Your JavaScript animation code

#rect {
  font-weight: 900;
  font-size: 2.5em;
}

#rect .letter {
  line-height: 1em;
}

#quizss {
display:none;
}

.word {
  white-space: nowrap;
}

<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>

If you want to dynamically create divs based on multiline text input using a text box, it may not work with the existing JavaScript animation function. You can check this by adding lines through the text box.

The code for your text box is as follows:

// Your JavaScript code for creating dynamic divs

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

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

If you're looking to integrate the text box data into the existing JavaScript animation, you might need to modify the animation script accordingly. Here's a snippet combining both scripts:

// Combined JS animation and textarea script

// Your combined script goes here

<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>

// Include necessary scripts

<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>

javascript html jquery css animation

Answer 1

Answer №1

There are a couple of things to consider:

It is not advisable to add the new quiz inside the rect. Instead, create a container for all the quizzes and add them there.
Make sure to update your questions variables every time you add a new quiz.

// Animation script in JS starts 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'>$&</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
    });
}

// Initialize
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();
  };
}
// Animation script in JS ends here

// Textarea script begins 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 textarea entries into an array
  let lines = (textArea.value).split("\n");

  // Iterate over each line, create a div/span, and insert it 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<>\&]/gim, function(i) {
    return '&#' + 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>

Answer 2

There are a couple of things to consider:

It is not advisable to add the new quiz inside the rect. Instead, create a container for all the quizzes and add them there.
Make sure to update your questions variables every time you add a new quiz.

// Animation script in JS starts 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'>$&</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
    });
}

// Initialize
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();
  };
}
// Animation script in JS ends here

// Textarea script begins 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 textarea entries into an array
  let lines = (textArea.value).split("\n");

  // Iterate over each line, create a div/span, and insert it 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<>\&]/gim, function(i) {
    return '&#' + 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>

I am having an issue with my DIV not functioning correctly in conjunction with my JS animation. What modifications should I make to

Answer №1

Similar questions

The concept of using the `map` method within a

JavaScript: How can I remove it when I click anywhere on the webpage with onClick?

VueJS component fails to remain anchored at the bottom of the page while scrolling

Press the button to activate the function

The jQuery .next() function is applying a class to each element

How can we use the nth-of-type selector to target a set of eight elements in a

Is Jsoup receiving the HTML incorrectly?

Calculating the total length of an SVG element using React

Python Selenium scraping script encountered an issue: Javascript element could not be located

Why is it that when I click outside of the <html> element, the click event bound to the <html> element is triggered?

When deployed, Webpack 2.2.0.rc-0 will condense and optimize vendor.js and manifest.js, but will not perform the same action on bundle

Connect the mileage tracker to a Datalist or grid view component

Arranging JavaScript object by object properties (name)

Clear Input Field upon Selection in JQuery Autocomplete

At times, the jQuery function may fail to execute

Leveraging Object.assign for updating fields in Firebase documents

Retrieving the custom attribute value from the chosen option and storing it in a JavaScript variable

Despite having unique ids, two file input forms are displayed in the same div in the image preview

The selected items in the Combobox are displaying as [object, Object] instead of their actual String values

Transmit a targeted header through ajax to Flask