We Keep Coding

Why does addeventlistener() not work in javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 23 days ago.
Improve this question
I am trying to playing an animation when clicked on a button but it does not work.
I want to play the 'logo_animation' when the pricing_logo got clicked.What is the problem ?
id="pricing-div">
<i id="pricing-logo" class="fa-solid fa-money-bill"></i>
<div id="pricing-display-div">
<img src="iphone-black.png" alt="" id="pricing-photo-div">
<div id="pricing-text-div"><h1 id="pricing-text">Pricing</h1></div>
<div id="pricing-storage-and-color-div">
<div id="pricing-storage-div">
<div id="pricing-storage-128-gb-button"><p id="pricing-storage-128-gb">128 GB</p></div>
<div id="sep-div"></div>
<div id="pricing-storage-256-gb-button"><p id="pricing-storage-256-gb">256 GB</p></div>
<div id="sep-div"></div>
<div id="pricing-storage-512-gb-button"><p id="pricing-storage-512-gb">512 GB</p></div>
<div id="sep-div"></div>
<div id="pricing-storage-1024-gb-button"><p id="pricing-storage-1024-gb">1 TB</p></div>
</div>
<div id="pricing-color-div">
<div id="color-space-black"></div>
<div id="sep-div"></div>
<div id="color-gold"></div>
<div id="sep-div"></div>
<div id="color-silver"></div>
<div id="sep-div"></div>
<div id="color-purple"></div>
</div>
</div>
</div>
</div>
<script>
var pricing_logo=document.getElementById("pricing-logo");
pricing_logo.addEventListener("click",function(){
pricing_logo.style.animationName="logo_animation";
pricing_logo.style.fontSize="0vw";
});
</script>

Here is a version as a snippet with a guess (well not a guess so much as an example) for the CSS code necessary for animation:
var pricing_logo = document.getElementById("pricing-logo");
pricing_logo.addEventListener("click", function() {
pricing_logo.style.animationName = "logo_animation";
});
#keyframes logo_animation {
from { font-size: 0; }
to { font-size: 18px; }
}
#pricing-logo {
animation-duration: 5s;
}
<div id="pricing-div">
<i id="pricing-logo" class="fa-solid fa-money-bill">FA</i>
<div id="pricing-display-div">
<img src="iphone-black.png" alt="" id="pricing-photo-div">
<div id="pricing-text-div">
<h1 id="pricing-text">Pricing</h1>
</div>
<div id="pricing-storage-and-color-div">
<div id="pricing-storage-div">
<div id="pricing-storage-128-gb-button">
<p id="pricing-storage-128-gb">128 GB</p>
</div>
<div id="sep-div"></div>
<div id="pricing-storage-256-gb-button">
<p id="pricing-storage-256-gb">256 GB</p>
</div>
<div id="sep-div"></div>
<div id="pricing-storage-512-gb-button">
<p id="pricing-storage-512-gb">512 GB</p>
</div>
<div id="sep-div"></div>
<div id="pricing-storage-1024-gb-button">
<p id="pricing-storage-1024-gb">1 TB</p>
</div>
</div>
<div id="pricing-color-div">
<div id="color-space-black"></div>
<div id="sep-div"></div>
<div id="color-gold"></div>
<div id="sep-div"></div>
<div id="color-silver"></div>
<div id="sep-div"></div>
<div id="color-purple"></div>
</div>
</div>
</div>
</div>
The code basically works. The main thing I did other than the CSS was to introduce content to that Font Awesome <i> tag so that there's something to click on.

You're probably switching css property wrong since only entering animation name in css wouldn't work. Example of working animation in css:
.class {
animation: animationName 1s (duration) 1 (or once, how many times animation is played out)
}
So what you can do is to apply already created class with this keyframes animation as described above with properties that you need or change the .style.animation property of element like that:
.addEventListener('click', () => {
const animationText = 'keyframes_name 1s forwards ease once'
element.style.animation = animationText
})
You can also add properties one by one from defined variables in your js.
There is also animate API in js which you can read on more here:
MDN docs js animation

Toggle button - show / hide information

Can someone help me hide / show the information when I click on the icon (arrow). I tried to use javascript, although it is not the best way, but it also didn't work.
I intend that by clicking on the image https://img.icons8.com/android/24/000000/down.png, the information below will be hidden and that image will change to the image of the upward facing arrow https://img.icons8.com/android/24/000000/up.png
When you click on the up-facing sta the information appears again and that same image is replaced by the downward-facing arrow image.
Can someone help me?
DEMO - STACKBLITZ
CODE
<div *ngFor="let item of data">
<div class="d-flex flex-row"
style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
<div>
<img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
</div>
<div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
</div>
</div>
<div class="d-flex flex-row"
style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
<div class="">
<img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
</div>
<div>
<span style="margin-left: 8px;">#{{item.name}}</span>
<div>{{item.date}}</div>
</div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
</div>
</div>
</div>

First of all, remove your styles for hide1 class. It's better to rely on *ngIf directive in Angular:
<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
Then implement method to toggling shown property:
toggle(item) {
item.shown = !item.shown;
}
Now you have to bind this method to DOM event on div wrapping your arrows:
<div (click)="toggle(item)">
</div>
And final step is to use *ngIf directive on other element you want to toggling:
<div class="d-flex flex-row" *ngIf="item.shown" ...

HTML5 introduced a <summary> and <details> tag to allow you to toggle information.
Here's an example:
<details>
<summary>Information you want shown</summary>
<p>Information you want toggled</p>
</details>

wonky problems with bootstrap -> rows not consistent width only on large screens

So I have this weird problem with bootstrap and rows. It only seems to happen in the LG view which is greater than 1200px. For some reason random rows are not conforming to the full amount they should(in this case 1140px) and instead are smaller.
I am including a few pictures to show exactly the issue I am talking about to see if I can figure out what is going on. Any help would be appreciated.
If i make the width smaller to simulate a smaller screen everything works without issue.
https://s21.postimg.org/8i0w6wtpz/Screen_Shot_2016_09_18_at_7_22_08_PM.png
https://s22.postimg.org/xr3ekeyf5/Screen_Shot_2016_09_18_at_7_23_09_PM.png
https://s22.postimg.org/dkzwlj2rl/Screen_Shot_2016_09_18_at_7_23_28_PM.png
<section class="inner">
<div class="container portfolio-container">
<h2>PORTFOLIO</h2>
<div class="prcnr" ng-repeat="port in portfolio">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<a rel="{{port._id}}" class="fancybox" href="images/uploads/{{ port.main_image }}">
<img src="images/uploads/{{ port.main_image }}" alt="" class="main_portfolio_image img-responsive">
</a>
<div class="hidden">
<a rel="{{port._id}}" ng-repeat="image in port.images" class="fancybox" href="images/uploads/{{image}}">
<img src="images/uploads/{{image}}" alt="">
</a>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 port-txt">
<h4><b>{{ port.title }}</b></h4>
<p ng-bind-html="port.description"></p>
</div>
</div>
</div>
</div>
</section>
Custom CSS Pertaining to this code :
.portfolio-container h4 {
font-size: 22.5px;
}
.portfolio-container .port-txt p {
font-size: 15px;
}
#media (min-width: 1200px) {
.main_portfolio_image {
width: 570px;
height: 385px;
}
}

those picture are not slimier to your code.
there is 2 col-lg-6 column I found where one column contain a hidden filed. that's not a problem. And you are using bootstrap so you don't need to set media query for image . Just simply use img-responsive and set the image with a min-width of 100% like and add container-fluid in html part
img.img-responsive{
min-width:100% !important;
}

Trying to make different text appear below 3 aligned images on hover

First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.

You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});

First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});

I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.

Flexslider - Updating Images via ng-repeat - Incorrect Width

I have a page with image scrolling and I'm using Flexslider to do that.
Now the images are based on date sorting - So I click on last 7 days - it displays me last 7 day images (data is sent and received via AngularJS).
Now. The data returned as JSON is received is - Okay.
The problem is when data is returned and updated in the view via FlexSlider - The Flexslider is updated with the new data but the width of the flexslider remains according to the maximum elements that were previously present.
Why is that? Could somebody help?
<div class="recent_uploads mar_btm" ng-controller="recentuploadsController">
<div class="mar_btm titl_img"><h6>Recent Uploads</h6><!--<img alt="recent uploads" src="<?php echo base_url();?>public/image/net03.png">--></div>
<input type="text" ng-model="search.text" class="community-searching hide">
<button ng-click="clearSearch()" class="hide">clear</button>
<div class="rec_uplist_cont">
<div class="rec_uplist_slider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 800%; transition-duration: 0.6s; transform: translate3d(-240px, 0px, 0px);">
<div class="recnt_info" ng-if="recentupload!=null"><p> No Data Found</p></div>
<li id="apptest" style="width: 226px; float: left; display: block;" class="animate-repeat" ng-repeat="recentupload in recentuploads | filter:search.text">
<div class="rec_uplist" >
<div class="recnt_info">{{recentupload.user}} <span class="timeago" title="{{recentupload.time}}">{{recentupload.time}}</span></div>
<img width="226" ng-click="showvideo(recentupload.id)" height="127" src="http://img.youtube.com/vi/{{recentupload.embededCode}}/0.jpg" />
<a href="#" ng-click="showvideo(recentupload.id)" >{{recentupload.vtitle}}</a>
</div>
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li></ol><ul class="flex-direction-nav"><li>Next</li><li>Previous</li></ul></div>
</div>
</div>

Try to detach or remove flexslider from DOM and after that initialize for the new gallery.
More info on how to remove flexslider HERE