Develop Reference

jQuery click event removing first element

Im working on a project and on my .ejs file I have a popup:
<div id="just-claimed-popup2" class="popup">
<h6>You just claimed:</h6>
<h2 id="card-just-claimed"></h2>
<p class="show-message">Show this Screen!</p>
<button id="deletePromoFromHome" class="close-button">Close</button>
</div>
On my javascript file I have a code that creates cards on a loop:
$('#promotion-container footer').before(`
<div class="promo card promo${i}">
<div class="promo-wrapper">
<div class="promo-header">
<h2 class="promo-title">${eventName}</h2>
<span class="close-promo-wrapper"><span class="close-promo"></span></span>
</div>
<div class="promo-info">
<span class="promo-details">
<p class="promo-detail promo-location">${eventLocation}</p>
<p class="promo-detail promo-date">${eventDate}</p>
<p class="promo-detail promo-time">${eventTime}
<span class="promo-description"></span>
<span class="buttonRedemp${i}">
<button class="redddButt load-button2" data="Reedem Card">Reedem Card</button>
</span>
</div>
</div>
</div>
`)
I want the card to disappear when people click 'redddButt', this is my code:
$(`#promotion-container .promo${i} .redddButt`).on('click', function(e){
e.stopPropagation();
$(`div.promo${i}`).addClass('toDelete')
var esc = $.Event("keyup", { keyCode: 27 });
$(document).trigger(esc);
$('#just-claimed-popup2').addClass('reveal');
$('#card-just-claimed').text(eventName);
$('#deletePromoFromHome').click(function(){
$('div.toDelete').fadeOut("slow")
})
})
PROBLEM: it always removes just the first card clicked and if you click the button in another one it stops working, so it only works once. If I console.log something the click event is happening, it's just not running the code inside of it.

Try changing your handler to:
$('body').on('click', `#promotion-container .promo${i} .redddButt`, function(e){
//function stuff here
}
The problem might be that elements are generated after the handler is attached.

Your code is missing some few closing tags. Since the cards are dynamically generated, try using (not tested):
var buttonContext;
$(document).on('click', '#promotion-container .promo .redddButt', function() {
buttonContext = $(this);
// Something
});
$('#deletePromoFromHome').click(function(){
buttonContext.closest('.promo').fadeOut("slow");
});
You can omit this line: $(div.promo${i}).addClass('toDelete');
The cards may have a single class (.promo) instead of (.promo#), unless may be you want to do further manipulation (say different styling etc).
Check this for more details on $(document): https://stackoverflow.com/a/32066793/3906884

cannot click button in changed iframe

Hello I am making a html page were there are 3 spans that the user can click on and each span can change the iframe src below. Each span is associated with its own html page and when the span is clicked it changes the iframe to its own html page.
The problem is that each html page has its own buttons with different buttons and such and in my js file I tried to add .click() to each button and for some reason the only click() works for the main iframe that is the main src of the iframe before it is changed.
Here is the HTML:
<div class="form-group">
<span id="Frame1" class="bla">test 1</span>
<span id="Frame1" class="bla">test 2</span>
<span id="Frame3" class="bla">test3</span>
</div>
<iframe src="test_1_Frame.html" style="width: 870px; height: 436px; border: 0;background-color:transparent;" id="frame">
Here is the code:
$(".bla").click(function(e) {
e.preventDefault();
$("#frame").attr("src", $(this).attr("id")+".html");
let currentFrame = $(this).attr("id");
console.log(currentFrame);
if (currentFrame == "Frame1") {
console.log(currentFrame);
} else if (currentFrame == "Frame2") {
console.log(`${currentFrame} should be Frame2`);
} else if (currentFrame == "Frame3") {
console.log(`${currentFrame} should be Frame3`);
}
});
then for the click part I did this:
$(function() {
$("#frame1_button").click(function() {
console.log('frame1');
})
$("#frame2_button").click(function() {
console.log('frame2');
})
$("#frame3_button").click(function() {
console.log('frame3');
})
});
each of these buttons is its own different button in each frame HTML. but for some reason only the "frame1" logs in the console when I press the frame1_button, but when I press the frame2 or frame 3 button nothing logs in the console.
When I go into the console and try directly typing in to click the button nothing happens(button isn't pressed) and this is the response I get:
If anyone knows why this is happening I would really appreciate your help, Thanks in advance.
(also not a big issue but I would really like to change the background colour of the currently selected span so if anyone knows how to do that I would appreciate a answer or comment).

How about this?
<div class="form-group">
<span id="Frame1" onclick=doSomething(this)>test 1</span>
<span id="Frame2" onclick=doSomething(this)>test 2</span>
<span id="Frame3" onclick=doSomething(this)>test3</span>
</div>
<script>
var doSomething = function(element){
console.log(element.id + " was clicked");
}
</script>
With a code pen here..
With onclick you can pass the element with this, and then access the id.

Script not working in subsequent modals

I've got help with a script that works in the first modal but doesn't in any of the next couple. When you scroll down, the background color changes in the first modal but nothing happens in the second and so forth.
https://jsfiddle.net/qhrmtass/10/
var scrollFn = function () {
var targetOffset = $("#anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($('.remodal').scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
};
$('.remodal').scroll(scrollFn);

Specification says UNIQUE
HTML 4.01 specification says ID must be document-wide unique.
HTML 5 specification says the same thing but in other words. It says that ID must be unique in its home subtree which is basically the document if we read the definition of it.
First for the best practice you have to change duplicate id anchor-point (in my example i change it to class) also for the id one should be unique.
Secondly you have to use $(this) inside your scroll function scrollFn to detect the current scrolling remodal and to select the elements that belong to it.
HTML :
<a class="project-link" href="#modal1" id="one" style="margin-right:25px;">Modurra Shelving </a>
<div class="remodal" data-remodal-id="modal1">
<div class="dar">Darrien Tu.</div>
<button class="remodal-close" data-remodal-action="close"></button>
<div class="anchor-point">sdfsfs</div>
<div class="title">
<p class="projectTitle">Modurra
<br>Shelving.</p>
</div>
</div> <a class="project-link" href="#modal2" id="one" style="margin-right:25px;">Other stuff </a>
<div class="remodal" data-remodal-id="modal2">
<div class="dar">Darrien Tu.</div>
<button class="remodal-close" data-remodal-action="close"></button>
<div class="anchor-point">sdfsfs</div>
<div class="title">
<p class="projectTitle">Modurra
<br>Shelving.</p>
</div>
</div>
Js :
var scrollFn = function () {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".projectTitle").addClass("topper");
} else {
$(this).find(".projectTitle").removeClass("topper");
}
};
$('.remodal').scroll(scrollFn);
Hope this could help, take a look at Working fiddle

Adding text from specific instance of div to textarea

So i'm trying to add some text to a textarea when a user clicks on an edit link. The user will click the edit link, which will then show a pop-up box with a textarea that shows the user their current comment.
There are going to be multiple instances of .comment-block with various different texts, as this text will be a user input comment. I want to take the .text text from the specific .comment-block depending on which .edit link was clicked. So if one comment-block has the text of "hello" and the other has text of "world", i want to take either "hello" or "world" and put it in the textarea, depending on which edit link was clicked from within the parent comment-block.
Hope that makes sense.
<div class="comment-block">
<div class="row">
<div class="col-xs-1">
<img src="/graphics/blank-avatar.jpg">
</div>
<div class="col-xs-11">
<p>
<span class="name">David Johnson</span>
<span class="text">Nice selection of images! Well done!</span>
<span class="edit">Edit</span>
</p>
<div class="date-posted">
Posted at 14:10 on 23rd September 2014
</div><!-- .date-posted -->
</div><!-- .col-xs-10 -->
</div><!-- .row -->
</div><!-- .comment-block -->
The JS
$("span.edit").click(function() {
//Get the text
var text = $.trim($(".comment-block p span.text").text())
//Create a text area selector (container, rather)
var textarea = $("#community-message-alt");
//Give the textarea a value
$("textarea", textarea).val(text);
textarea.show();
});

Something like this?
$(".edit").click(function(){
var text = $(this).parent().find(".text").first().html();
$("#ta1").html(text);
});
DEMO FIDDLE

You can do something like this:
$(".edit").click(function(){
var text = $(this).prev(".text").text();
var textarea = $("#community-message-alt");
textarea.text(text);
textarea.show();
});

How to use Javascript or Jquery to toggle the visibility of a html div

I'm creating a basic site and I've got the following script that hides a div:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Show/Hide Description
<div id="description">
<br>
<br>
<p>This is a test paragraph</p>
</div>
When I load the page, the default is that the text is shown. How can I hide the text inside the div each time the page is loaded?
I want the user to manually click the button to view the text.
EDIT:
I've now added a picture of a + symbol, so that a user can click the + and the text appears by using the following lines:
<h4>Backstory</h4>
<img alt="" style="width: 20px; height: 20px;" src="./images/headerExpand.png" a href="#" onclick="toggle_visibility('backstory');">Show/Hide Description</a>
<div id="backstory" style="display: none">
<br>
<p>This is a new block of text</p>
</div>
The ./images/headerExpand.png is the icon of the + symbol
How would I change the + icon to a - icon once the + icon has been clicked?
Thanks.

set the display to none
<div id="description" style="display: none">
A redesigned solution might look like
<!-- Add a class toggler and the id of the target element as the href-->
Show/Hide Description
<!-- Add a class hidden so that the element is hidden when the page loads -->
<div id="description" class="hidden">
<br/>
<br/>
<p>This is a test paragraph</p>
</div>
CSS
.hidden {
display: none;
}
then jQuery script
// dom ready handler
jQuery(function () {
//register a click handelr for all anchor elements with class toggler
$('a.toggler').click(function (e) {
//prevent the default action of the event
e.preventDefault();
//togger the visibility of the element targetted by the href
$($(this).attr('href')).toggle()
});
})
Demo: Fiddle

use symply CSS :
<p style="display:none;">This is a test paragraph</p>

you have 2 options , set the css property right in the html like the other answers
<div id="description" style="display: none">
or wrap your javascript in something to tell the page to run the stript on page load
using jQuery
$(document).ready(function(){
//your code
});
or
$(function(){
//your code
});
or regular old javascript
window.onload = function(){
//your code
});