We Keep Coding

Can a function be inside another function?

I am working on a library project but my function called changeColor inside the readStatus function does not appear to be working.
I've tried separating it but having two event listeners on the same button does not appear to work. My goal is for readStatus function to allow a user to update the status of a book from no to yes when finished with the book.
Likewise, I want to change the background color of the div (class: card) when yes to be green and no to be red.
Can anyone tell me what I'm doing wrong?
let myLibrary = [];
function Book(title, author, pages, read) {
this.title = title;
this.author = author;
this.pages = pages;
this.read = read;
}
function addBookToLibrary(title, author, pages, read) {
let book = new Book(title, author, pages, read);
myLibrary.push(book);
displayOnPage();
}
function displayOnPage() {
const books = document.querySelector(".books");
const removeDivs = document.querySelectorAll(".card");
for (let i = 0; i < removeDivs.length; i++) {
removeDivs[i].remove();
}
let index = 0;
myLibrary.forEach((myLibrarys) => {
let card = document.createElement("div");
card.classList.add("card");
books.appendChild(card);
for (let key in myLibrarys) {
let para = document.createElement("p");
para.textContent = `${key}: ${myLibrarys[key]}`;
card.appendChild(para);
}
let read_button = document.createElement("button");
read_button.classList.add("read_button");
read_button.textContent = "Read ";
read_button.dataset.linkedArray = index;
card.appendChild(read_button);
read_button.addEventListener("click", readStatus);
let delete_button = document.createElement("button");
delete_button.classList.add("delete_button");
delete_button.textContent = "Remove";
delete_button.dataset.linkedArray = index;
card.appendChild(delete_button);
delete_button.addEventListener("click", removeFromLibrary);
function removeFromLibrary() {
let retrieveBookToRemove = delete_button.dataset.linkedArray;
myLibrary.splice(parseInt(retrieveBookToRemove), 1);
card.remove();
displayOnPage();
}
function readStatus() {
let retrieveBookToToggle = read_button.dataset.linkedArray;
Book.prototype = Object.create(Book.prototype);
const toggleBook = new Book();
if (myLibrary[parseInt(retrieveBookToToggle)].read == "yes") {
toggleBook.read = "no";
myLibrary[parseInt(retrieveBookToToggle)].read = toggleBook.read;
} else if (myLibrary[parseInt(retrieveBookToToggle)].read == "no") {
toggleBook.read = "yes";
myLibrary[parseInt(retrieveBookToToggle)].read = toggleBook.read;
}
let colorDiv = document.querySelector(".card");
function changeColor() {
for (let i = 0; i < length.myLibrary; i++) {
if (myLibrary[i].read == "yes") {
colorDiv.style.backgroundColor = "green";
} else if (myLibrary[i].read == "no") {
colorDiv.style.backgroundColor = "red";
}
}
}
displayOnPage();
}
index++;
});
}
let add_book = document.querySelector(".add-book");
add_book.addEventListener("click", popUpForm);
function popUpForm() {
document.getElementById("data-form").style.display = "block";
}
function closeForm() {
document.getElementById("data-form").style.display = "none";
}
let close_form_button = document.querySelector("#close-form");
close_form_button.addEventListener("click", closeForm);
function intakeFormData() {
let title = document.getElementById("title").value;
let author = document.getElementById("author").value;
let pages = document.getElementById("pages").value;
let read = document.getElementById("read").value;
if (title == "" || author == "" || pages == "" || read == "") {
return;
}
addBookToLibrary(title, author, pages, read);
document.getElementById("data-form").reset();
}
let submit_form = document.querySelector("#submit-form");
submit_form.addEventListener("click", function (event) {
event.preventDefault();
intakeFormData();
});
* {
margin: 0;
padding: 0;
background-color: rgb(245, 227, 205);
}
.books {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
text-align: center;
margin: 20px;
gap: 10px;
}
.card {
border: 1px solid black;
border-radius: 15px;
padding: 10px;
}
.forms {
display: flex;
flex-direction: column;
align-items: center;
}
form {
margin-top: 20px;
}
select,
input[type="text"],
input[type="number"] {
width: 100%;
box-sizing: border-box;
}
.buttons-container {
display: flex;
margin-top: 10px;
}
.buttons-container button {
width: 100%;
margin: 2px;
}
.add-book {
margin-top: 20px;
}
#data-form {
display: none;
}
.read_button {
margin-right: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="forms">
<button class="add-book">Add Book To Library</button>
<div class="pop-up">
<form id="data-form">
<div class="form-container">
<label for="title">Title</label>
<input type="text" name="title" id="title" />
</div>
<div class="form-container">
<label for="author">Author</label>
<input type="text" name="author" id="author" />
</div>
<div class="form-container">
<label for="pages">Pages</label>
<input type="number" name="pages" id="pages" />
</div>
<div class="form-container">
<label for="read">Read</label>
<select name="read" id="read">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="buttons-container">
<button type="submit" id="submit-form">Submit Form</button>
<button type="button" id="close-form">Close Form</button>
</div>
</form>
</div>
</div>
<div class="books"></div>
</div>
<script src="script.js"></script>
</body>
</html>

A couple things needed.
First, you should put the readStatus and removeFromLibrary functions outside of the foreach loop.
Then I think you are wanting changeColor to run whenever readStatus is run. Either put the changeColor code directly inside the readStatus or put changeColor() inside readStatus.

I think you want the Book to not be a function but a class.

Both my if and else get excecuted at the same time when I write a correct word

I tried making this "game" where I have to write English words that have 5 characters, if I write something gibberish it says that that word is incorrect.
However, when I write a word from the list, it shows the word, but it also shows the message saying its incorrect. It seems both my if and else are executing. Can someone help me understanding this behavior?
var emrat5 = [
{emri:"about"},
{emri:"added"},
{emri:"again"},
{emri:"ahead"},
{emri:"above"},
{emri:"adult"},
{emri:"album"},
]
function shfaq(){
var inputi = document.getElementById("inputi").value;
document.getElementById("thewrongdiv").innerHTML = ""
for(var i=0;i<emrat5.length;i++){
if(inputi == emrat5[i].emri){
document.getElementById("thewrongdiv").style.display = "none"
var result = document.createElement("h2");
result.innerHTML = inputi;
result.style.color = "blue";
result.style.display = "block"
document.getElementById("theOutputdiv").appendChild(result)
document.getElementById("inputi").value= null
}
else{
document.getElementById("thewrongdiv").innerHTML = ""
var wrong = document.createElement("h2");
wrong.innerHTML = "Incorrect Word";
wrong.style.color = "red";
document.getElementById("thewrongdiv").style.display = "block"
document.getElementById("thewrongdiv").appendChild(wrong)
inputi.value = ""
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
body{
background: #d4d4d4;
}
*{
font-family: monospace;
}
.verytop{
background-color: #929292;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.verytop > h1{
color:white;
font-size: 30px;
}
#thetutorial{
display: flex;
justify-content: center;
padding: 20px 0px;
}
#thetutorial > h3{
font-size: 20px;
}
#thewrongdiv{
width: 200px;
height: 200px;
}
</style>
<title>Word Guesser</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="verytop">
<h1>The 5 letter word game</h1>
</div>
</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div id="thetutorial" class="col-lg-12">
<h3>see how many 5 letter words with that length can you guess in 1 minute</h3>
</div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div style="margin-top: 40px;" id="theInputdiv">
<input onsearch="shfaq()" id="inputi" class="form-control" type="search">
</div>
<div id="theOutputdiv">
</div>
</div>
<div style="height:400px" class="col-lg-4 d-flex justify-content-center align-items-center">
<div id="thewrongdiv">
</div>
</div>
</div>
</div>
</body>
</html>

In your current code the input value is compared to each entry in the expected words list. This means that a correct word will be accepted by the if statement, but will also be declined by the next word in the expected words list.
To overcome this issue, change the code to something like this:
var correct = false;
for(var i = 0; i < emrat5.length; i++) {
if(inputi == emrat5[i].emri){
correct = true;
break;
}
if(correct){
// ...Handle correct word
} else {
// ...Handle incorrect word
}

Issue: Its displaying error message even after match because of your loop.
Example you are entering "about". It well enter in if block as the match will satisfy for the first loop iteration. Now the loop will go for second iteration, "about" is not equal to "second word", which will go to else part.
Solution: You just need to terminate loop when you get your first match. Just add break statement at the end of the IF.
Modified code:
if(inputi == emrat5[i].emri){
document.getElementById("thewrongdiv").style.display = "none"
var result = document.createElement("h2");
result.innerHTML = inputi;
result.style.color = "blue";
result.style.display = "block"
document.getElementById("theOutputdiv").appendChild(result)
document.getElementById("inputi").value= null
break;
}
else{
document.getElementById("thewrongdiv").innerHTML = ""
var wrong = document.createElement("h2");
wrong.innerHTML = "Incorrect Word";
wrong.style.color = "red";
document.getElementById("thewrongdiv").style.display = "block"
document.getElementById("thewrongdiv").appendChild(wrong)
inputi.value = ""
}

You need to break out of the if to make it work correctly :
just add break; at the end of your if statement.
Because if it doesn't come out of the loop its gonna run for the entire loop meaning it would be correct the first time but still run the else because its in the loop.
if(inputi == emrat5[i].emri){
document.getElementById("thewrongdiv").style.display = "none"
var result = document.createElement("h2");
result.innerHTML = inputi;
result.style.color = "blue";
result.style.display = "block"
document.getElementById("theOutputdiv").appendChild(result)
document.getElementById("inputi").value= null
break;
}
Tested it and it works.

Changing Iframes HTML

I need a script to change the iframes src every certain amount of seconds. The time between the change is different between each one.
Example:
Page Loads
Google.com is loaded.
15 seconds later
Yahoo.com is loaded.
37 seconds later
Ask.com is loaded.
12 seconds later
Dogpile.com is loaded.
and so on and so forth.
I've tried that:
<html>
<head>
<meta charset="utf-8" />
<title>Monitor Presidência</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>
<body>
<div style="width: 100%; display: flex;">
<div class="ui teal progress" data-percent="0" id="example1" style="width: 90%;margin-bottom: 0px">
<div class="bar"></div>
</div>
<div class="ui icon buttons" style="width: 10%">
<button class="ui button" style="width: 25%" onclick="menos_um()">
<i class="left chevron icon"></i>
</button>
<button class="ui button " style="width: 25%" onclick="inicia()">
<i class="play icon"></i>
</button>
<button class="ui button" style="width: 25%" onclick="para_aplicacao()">
<i class="pause icon"></i>
</button>
<button class="ui button" style="width: 25%" onclick="mais_um()">
<i class="right chevron icon"></i>
</button>
</div>
</div>
<iframe id="envase" class="frame_mon" style="width: 100%;height: 100%;" src="www.google.com.br"></iframe>
<iframe id="frete_hl" class="frame_mon" style="width: 100%;height: 100%;display: none;" src="www.yahoo.com.br"></iframe>
<iframe id="frete_hl_acum" class="frame_mon" style="width: 100%;height: 100%;display: none;" src="www.terra.com.br"></iframe>
</body>
<script>
var arr_monitores = ["envase", "frete_hl", "frete_hl_acum"];
var num_monitor = 0;
var progresso = 0;
var myVar;
var setintervalatualizaframe;
function mais_um() {
/* if (num_monitor === 2) {
num_monitor = 0;
} else {
num_monitor++;
}
$('.frame_mon').css('display', 'none');
document.getElementById(arr_monitores[num_monitor]).style.display = "";*/
progresso = 100;
myStopFunction();
inicia();
/* if (num_monitor === 2) {
num_monitor = 0;
} else {
num_monitor++;
}*/
};
function menos_um() {
//progresso = 100;
if (num_monitor === 0) {
num_monitor = 2;
} else {
num_monitor--;
}
$('.frame_mon').css('display', 'none');
document.getElementById(arr_monitores[num_monitor]).style.display = "";
progresso = 0;
myStopFunction();
inicia();
};
function inicia() {
clearInterval(setintervalatualizaframe);
myStopFunction();
myVar = setInterval(function () {
if (progresso === 100) {
progresso = 0;
if (num_monitor === 2) {
location.reload();
//num_monitor = 0;
} else {
num_monitor++;
}
$('.frame_mon').css('display', 'none')
document.getElementById(arr_monitores[num_monitor]).style.display = "";
};
progresso++;
progresso++;
$('#example1').data('percent', progresso);
$('#example1').progress();
}, 3800);
}
function myStopFunction() {
clearInterval(myVar);
//atualiza_frame();
}
inicia();
function para_aplicacao(){
clearInterval(myVar);
atualiza_frame();
}
function atualiza_frame() {
clearInterval(setintervalatualizaframe);
setintervalatualizaframe = setInterval(function () {
document.getElementById(arr_monitores[num_monitor]).src=document.getElementById(arr_monitores[num_monitor]).src;
},1);
}
</script>
</html>

The way you are using setInterval and setTimeout is not properly
handled, as it creates a timer id to schedule execution. 0
A much more efficient way is to use the Promises async library, which is displayed below. 1
For websites that won't work, they are using a response header that won't allow their pages to be framed. You can work around this with some back-end program, where the server loads the web files then forwards them. 2
<!DOCTYPE html>
<html>
<head>
<title> Hello </title>
<style>
iframe {
display: block;
width: 1000px;
height: 500px;
margin-left: auto;
margin-right: auto;
}
iframe:focus {
outline: none;
}
button {
display: block;
margin: auto auto;
}
label {
display: block;
margin-left: auto;
margin-right: auto;
}
input {
display: block;
margin: auto auto;
}
</style>
</head>
<body>
<div id='main'>
<button id='wait' onclick='wait()'>Wait</button>
<label>Seconds</label>
<input type='number' id='seconds' placeholder='milliseconds'>
<button id='switching' onclick='webSwitch()'>Switch sites</button>
<iframe id='switchMe' src='https://codepen.io'></iframe>
</div>
<script>
//Array of webpages
var webList = ["https://www.bing.com", "https://www.walmart.com","https://www.codepen.io"];
//For tracking position in array
var count = 0;
//Function to be ran by event
function webSwitch() {
console.log('I have been called');
if (count >= webList.length) {
count = 0;
}
//Setting new URL
document.getElementById('switchMe').src = webList[count];
//Make sure to use next URL
count++;
}
function wait() {
console.log('Click!');
var numMS = document.getElementById('seconds').value;
sleep(numMS).then(() => {
webSwitch();
})
}
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}
</script>
</body>
</html>

Fruit ninja type game in javascript

I'm trying to make a ninja fruit style game in javascript but problems are happening. I have this if statements that compare the variable "fruit" with the index of the "fruits" array. The problem is when I "eliminate" a fruit the other if statements doenst work.
That's how the game needs to work:
1 You start the game, a random name of a fruit appears for you to click on.
2 You click in the image of the fruit and it disappears, in this click another random fruit is generated.
3 An then you finish the game, that's prety much this.
So it's kind hard to explain, but its the same logic as the ninja fruit game. And I dont know if I need to use the shift function to eliminate the fruits in the array as well.
var fruits = ['Banana', 'Apple', 'Pineapple'];
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
document.getElementById("frut").innerHTML = fruit;
if (fruit == fruits[0]) {
bana.onclick = function() {
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
document.getElementById("frut").innerHTML = fruit;
bana.style.display = "none";
}
}
if (fruit == fruits[1]) {
app.onclick = function() {
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
document.getElementById("frut").innerHTML = fruit;
app.style.display = "none";
}
}
if (fruit == fruits[2]) {
pin.onclick = function() {
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
document.getElementById("frut").innerHTML = fruit;
pin.style.display = "none";
}
}
function movFruit() {
document.getElementById("info").style.display = "table";
document.getElementById("fruitAnimation").style.display = "table";
document.getElementById("insructions").style.display = "none";
var elem = document.getElementById("fruitAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
}
}
}
#fruitAnimation {
position: relative;
display: none;
margin: 0 auto;
}
.fr {
float: left;
padding: 80px;
}
#info {
display: none;
margin: 0 auto;
}
#insructions {
display: table;
margin: 0 auto;
margin-top: 200px;
border: 1px solid black;
padding: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<title>JSfruit</title>
</head>
<body>
<div id="info">
<h1>Fruit: <span id="frut"></span></h1>
</div>
<button onclick="movFruit() " style="display: table; margin: 0 auto;"><h4>Start the game</h4></button>
<div id="fruitAnimation">
<div class="fr" id="bana">
<img src="https://orig00.deviantart.net/5c87/f/2016/322/8/9/banana_pixel_art_by_fireprouf-daosk9z.png" width="60" height="60">
</div>
<div class="fr" id="app">
<img src="https://art.ngfiles.com/images/404000/404664_thexxxreaper_pixel-apple.png?f1454891997" width="60" height="60">
</div>
<div class="fr" id="pin">
<img src="https://i.pinimg.com/originals/c2/f9/e9/c2f9e9f8d332da97a836513de98f7b29.jpg" width="60" height="60">
</div>
</div>
<span id="insructions">Click in the fruits and erase them!</span>
</body>
</html>

Right now, you're only attaching handlers to the fruit images at the top level, in your if statements - but once those statements run and the main block finishes, it doesn't get run again.
You should attach handlers to all fruit images at once in the beginning, and then in the handlers, check to see the clicked fruit was valid.
If you're assigning text to an element, assign to textContent, not innerHTML; textContent is quicker, safer, and more predictable.
const fruits = ['Banana', 'Apple', 'Pineapple'];
const getRandomFruit = () => {
const randomIndex = Math.floor(Math.random() * fruits.length);
const fruit = fruits[randomIndex];
document.getElementById("frut").textContent = fruit;
fruits.splice(randomIndex, 1);
return fruit;
};
let fruitToClickOn = getRandomFruit();
bana.onclick = function() {
if (fruitToClickOn !== 'Banana') return;
bana.style.display = "none";
fruitToClickOn = getRandomFruit();
}
app.onclick = function() {
if (fruitToClickOn !== 'Apple') return;
app.style.display = "none";
fruitToClickOn = getRandomFruit();
}
pin.onclick = function() {
if (fruitToClickOn !== 'Pineapple') return;
pin.style.display = "none";
fruitToClickOn = getRandomFruit();
}
function movFruit() {
document.getElementById("info").style.display = "table";
document.getElementById("fruitAnimation").style.display = "table";
document.getElementById("insructions").style.display = "none";
var elem = document.getElementById("fruitAnimation");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
}
}
}
#fruitAnimation {
position: relative;
display: none;
margin: 0 auto;
}
.fr {
float: left;
padding: 80px;
}
#info {
display: none;
margin: 0 auto;
}
#insructions {
display: table;
margin: 0 auto;
margin-top: 200px;
border: 1px solid black;
padding: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<title>JSfruit</title>
</head>
<body>
<div id="info">
<h1>Fruit: <span id="frut"></span></h1>
</div>
<button onclick="movFruit() " style="display: table; margin: 0 auto;"><h4>Start the game</h4></button>
<div id="fruitAnimation">
<div class="fr" id="bana">
<img src="https://orig00.deviantart.net/5c87/f/2016/322/8/9/banana_pixel_art_by_fireprouf-daosk9z.png" width="60" height="60">
</div>
<div class="fr" id="app">
<img src="https://art.ngfiles.com/images/404000/404664_thexxxreaper_pixel-apple.png?f1454891997" width="60" height="60">
</div>
<div class="fr" id="pin">
<img src="https://i.pinimg.com/originals/c2/f9/e9/c2f9e9f8d332da97a836513de98f7b29.jpg" width="60" height="60">
</div>
</div>
<span id="insructions">Click in the fruits and erase them!</span>
</body>
</html>

Javascript state change reverting

I have a simple jQuery app to display images from Giphy based on an ajax call, and toggle animate/stop them on mouseclick by toggling the src URL and data-state attributes.
I'm also displaying a different set of images based on user input.
I have a bug where it only animates gifs displayed after the first ajax call. It doesn't animate gifs displayed by subsequent calls. console-logging for each condition makes me think that for the latter it changes the state and changes it back, but I can't wrap my head around why.
Screencap: https://screencast.com/t/uZCzH6E6hZ8n
$('document').ready(function () {
//array with topics
var topics = [
"Ronaldinho",
"Zidan",
"Messi",
"Maradona",
"Pele"
]
//function loop to display all topics in buttons
function displayTopics() {
for (var i = 0; i < topics.length; i++) {
$('#buttons').append('<div class="btn btn-info get-giphy" data-attribute=' + topics[i] +
'>' + topics[i] +
'</div>');
}
}
//call function to display all the topic buttons
displayTopics();
//on clicking button
$('#buttons').on('click', '.get-giphy', function () {
$('#gifs-appear-here').empty();
//set topic to the clicked button's data-attribute
var topic = $(this).attr('data-attribute');
//set query URL to picked topic
var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + topic +
"&api_key=O2X0wRMnWEjylyUypx1F5UVxCz5Jp8kr&limit=10";
//ajax call to Giphy API
$.ajax({
url: queryURL,
method: 'GET'
}).then(function (response) {
console.log(response);
// Storing an array of results in the results variable
var results = response.data;
// Looping over every result item
for (var i = 0; i < results.length; i++) {
// Only taking action if the photo has an appropriate rating
if (results[i].rating !== "r") {
// Creating a div with the class "item"
var gifDiv = $("<div class='item'>");
// Storing the result item's rating
var rating = results[i].rating;
// Creating a paragraph tag with the result item's rating
var p = $("<p>").text("Rating: " + rating);
// Creating an image tag
var topicImage = $("<img>");
// Giving the image tag necessary attributes
topicImage.attr({
"class": "topicImage",
"src": results[i].images.fixed_height_still.url,
"data-state": "still",
"data-still": results[i].images.fixed_height_still.url,
"data-animate": results[i].images.fixed_height.url
});
// Appending the paragraph and personImage we created to the "gifDiv" div we created
gifDiv.append(topicImage);
gifDiv.append(p);
// Prepending the gifDiv to the "#gifs-appear-here" div in the HTML
$("#gifs-appear-here").prepend(gifDiv);
}
}
});
$('#gifs-appear-here').on('click', '.topicImage', function () {
var state = $(this).attr("data-state");
if (state === "still") {
$(this).attr("src", $(this).attr("data-animate"));
$(this).attr("data-state", "animate");
console.log('still --> animate');
} else if (state === "animate") {
$(this).attr("src", $(this).attr("data-still"));
$(this).attr("data-state", "still");
console.log('animate --> still');
}
else {
return false;
}
});
});
//add buttons
$('button[type="submit"]').click(function () {
var inputValue = $('.form-control').val().trim();
//don't add buttons if they're already in topics array
if (topics.includes(inputValue)) {
$('.modal').modal('show');
$('.modal-body').html('You already have a button for <b>' + inputValue +
'</b>. Use it or add something else');
setTimeout(function () {
$('.modal').modal('hide');
}, 4000);
//add buttons if they aren't in the topics array
} else {
topics.push(inputValue);
$('#buttons').empty();
displayTopics();
}
});
//get form input on pressing "enter key"
$('.form-control').keypress(function (e) {
if (e.which == 13) { //Enter key pressed
$('button[type="submit"]').click(); //Trigger search button click event
}
});
});
.row {
margin-top: 30px;
}
.col {
background-color: #eee;
padding: 15px;
border-radius: 10px;
}
.get-giphy {
margin: 0 15px 15px 0;
}
.topicImage {
max-width: 100%;
}
#media all and (min-width: 768px) {
#buttons {
border-right: 15px solid #fff;
}
#formWrap {
border-left: 15px solid #fff;
}
}
#media all and (max-width: 768px) {
#buttons {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#formWrap {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
#media all and (max-width: 575px) {
.row {
margin-left: 0;
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="main.js"></script>
<title>Homework 6</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-12">
<h1>Who's your favorite Futbol star?</h1>
</div>
</div>
<div class="row">
<div id="buttons" class="col col-12 col-md-6 col-lg-6">Click a button!
<br>
<br>
</div>
<div id="formWrap" class="col col-12 col-md-6 col-lg-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="You can also add more buttons!">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="row">
<div id="gifs-appear-here" class="col col-12">
Your gifs will appear here
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="answerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Not so fast!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>

As it stands, ('#gifs-appear-here').on('click', '.topicImage', ...) is executed inside the buttons' onclick handler, causing that delegated click handler to accumulate every time one of the buttons is clicked.
To fix, simply move ('#gifs-appear-here').on('click', '.topicImage', ...) out of the buttons' onclick handler.
Here it is (significantly tidied) :
$('document').ready(function () {
var topics = [
"Ronaldinho",
"Zidan",
"Messi",
"Maradona",
"Pele"
];
function displayTopics() {
for (var i = 0; i < topics.length; i++) {
$('#buttons').append('<div class="btn btn-info get-giphy" data-attribute=' + topics[i] + '>' + topics[i] + '</div>');
}
}
displayTopics();
$('#buttons').on('click', '.get-giphy', function () {
$('#gifs-appear-here').empty();
var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + $(this).data('attribute') + "&api_key=O2X0wRMnWEjylyUypx1F5UVxCz5Jp8kr&limit=10";
$.ajax({
'url': queryURL,
'method': 'GET'
}).then(function (response) {
var results = response.data;
for (var i = 0; i < results.length; i++) {
if (results[i].rating !== "r") {
var gifDiv = $("<div class='item'/>").prependTo("#gifs-appear-here");
$("<img class='topicImage'/>").attr({
'src': results[i].images.fixed_height_still.url
}).data({
'state': 'still',
'images': results[i].images
}).appendTo(gifDiv);
$('<p/>').text("Rating: " + results[i].rating).appendTo(gifDiv);
}
}
});
});
$('#gifs-appear-here').on('click', '.topicImage', function () {
var data = $(this).data();
if (data.state === 'still') {
$(this).attr('src', data.images.fixed_height.url);
data.state = 'animate';
} else {
$(this).attr('src', data.images.fixed_height_still.url);
data.state = 'still';
}
});
//add buttons
$('button[type="submit"]').click(function () {
var inputValue = $('.form-control').val().trim();
//don't add buttons if they're already in topics array
if (topics.includes(inputValue)) {
$('.modal').modal('show');
$('.modal-body').html('You already have a button for <b>' + inputValue + '</b>. Use it or add something else');
setTimeout(function () {
$('.modal').modal('hide');
}, 4000);
//add buttons if they aren't in the topics array
} else {
topics.push(inputValue);
$('#buttons').empty();
displayTopics();
}
});
//get form input on pressing "enter key"
$('.form-control').keypress(function (e) {
if (e.which == 13) { //Enter key pressed
$('button[type="submit"]').click(); //Trigger search button click event
}
});
});
.row {
margin-top: 30px;
}
.col {
background-color: #eee;
padding: 15px;
border-radius: 10px;
}
.get-giphy {
margin: 0 15px 15px 0;
}
.topicImage {
max-width: 100%;
}
#media all and (min-width: 768px) {
#buttons {
border-right: 15px solid #fff;
}
#formWrap {
border-left: 15px solid #fff;
}
}
#media all and (max-width: 768px) {
#buttons {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#formWrap {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
#media all and (max-width: 575px) {
.row {
margin-left: 0;
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="main.js"></script>
<title>Homework 6</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-12">
<h1>Who's your favorite Futbol star?</h1>
</div>
</div>
<div class="row">
<div id="buttons" class="col col-12 col-md-6 col-lg-6">Click a button!
<br>
<br>
</div>
<div id="formWrap" class="col col-12 col-md-6 col-lg-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="You can also add more buttons!">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="row">
<div id="gifs-appear-here" class="col col-12">
Your gifs will appear here
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="answerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Not so fast!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>