Develop Reference

Multiple button click animation jQuery

I am beginner so please don't make too much fun of me, but I am having issues trying to get separate buttons to react when clicked. The current code that I have written will dim the all of the buttons when I click on only one of them. The problem is that I have 4 buttons and I want them to all be independent, but I don't want to type the same code 4 times for each of them.
Here is my HTML:
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
Here is my jQuery code:
let buttonDim = function(){
$(".btn").on("click", function(){
$(".btn").addClass("pressed");
setTimeout(function(){
$(".btn").removeClass("pressed");
}, 100);
});
}
buttonDim();
I am aware that I have probably written the code ridiculously longer than it needs to be, but I am still learning.
Any help would be greatly appreciated, thank you.

Try js buttonDim() like this
$(".btn").on("click", function(){
var button=$(this);
button.addClass("pressed");
setTimeout(function()
{
button.removeClass('pressed');
}, 2000);
});

html file wont read onclick attribute as a string

I am really new to coding and I am following this video tutorial to make a website that displays someone's age in days depending on the prompt input. I am trying to link an onclick attribut to an HTML button that will link to my js function. the problem is that the onclick attribute will not read the js function as a string; thus, not functioning properly. I have tried to google the solution for almost an hour now, but I have not found anything that works. Please help. EDIT: I was told to add parentheses and it still did not work.
html code:
<div class="container1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flexboxcontainer1">
<div>
<button class="btn btn-primary" onclick="ageindays()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flexboxcontainer1">
<div id="flexboxresult"></div>
</div>
</div>
<script src="project1.js"></script>
</body>
</html>
js code:
function ageindays() {
var birthyear = prompt("What year were you born.. Good friend?");
}

You need to call it with (). So, it will be onclick="ageindays()"
function ageindays() {
var birthyear = prompt("What year were you born.. Good friend?");
}
<div class="container1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flexboxcontainer1">
<div>
<button class="btn btn-primary" onclick="ageindays()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flexboxcontainer1">
<div id="flexboxresult"></div>
</div>
</div>
<script src="project1.js"></script>

Simple Javascript code (function) is not working

The simple javascript is not working. When I test the code in live preview (chrome), it says "ThfJ8q9:58 Uncaught ReferenceError: textpage is not defined
at HTMLButtonElement.onclick (ThfJ8q9:58)"
What I am trying to do is to change the background image of the div "chat" when the button is clicked to the new image specified.
HTML:
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JAVASCRIPT DOCUMENT:
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('full-convesation-
MRP.png')";
}

Could use something like this to listen for a click on the button
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" id="btns"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
var btntrigger = document.getElementById('btns');
btntrigger.addEventListener('click', function(){
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
})
Or have a closer look at your syntax on the orginal, fixed here:
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()">
<img class="submit-button-img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
}
:)

Any idea why this javascript preventDefault function is not being called in this scenario?

I have some HTML that should respond to user interaction. It is a page that I am trying to get to work offline. After I load the page while online I end up with fully rendered HTML. Some of the HTML contains show/hide functionality, and is meant to prevent deafult action of an element click. For instance, see this:
<div id="area49253971_6938" class="component interaction-component float-none clear-none interaction_booted">
<div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
<div>
<div class="data-field interaction-type">RevealContent</div>
<div class="interaction_title"></div>
<div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
<div class="pointer">
<td>
<div id="area49253971_6940" class="component image-component float-left clear-none booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
<p class="body" id="area49253971_6941"><em><strong>Some question</strong></em></p>
</td>
</div>
<div style="display: block;">
<td>
<p class="body" id="area49253971_6942"><strong>Some answer</strong></p>
</td>
</div>
</div>
<div class="interaction_data" style="display: none;">
<div id="area49253971_6939" class="component table-component float-none clear-none ">
<div class="component_caption"></div>
</div>
</div>
</div>
</div>
The app's code is not working offline (I think due to app's ajax calls and a bunch of other dependencies and app-specific stuff). (By the way, you can see the app code I am trying to rewrite into pure jQuery here: https://jsfiddle.net/0s6xdk9q/1/). So I decided to rewrite the app functionality like so:
$(document).ready(function() {
$(this).on('click', '.interaction_booted', function () {
interactionData = $(this).find(".interaction_data");
this.container = $(this).find(".interaction_content");
var contentToReveal = ($(this).find('.RevealContent')).children()[1];
var initialContent = ($(this).find('.RevealContent')).children()[0];
$(contentToReveal).slideToggle('slow');
var a = initialContent.find('a');
a[0].addEventListener("click", function(e){
e.preventDefault();
}, false);
});
});
Something is not quite right. Maybe because I have multiple click events. In any case, I confirmed by stepping through the code in Chrome that the variable a is indeed the element I expect. All element selectors are working fine. But nothing I do is resulting in this preventDefault from working. I have a feeling there is a simple answer, just not seeing it. Also, I am trying to do this in a way that doesn't require me to add anything to the HTML.
Thoughts?
thanks,
Brian

Can't get div to hide by id not class

I'm trying to simply hide something when the page loads...I'm actually going to have quite a few things hidden eventually, but right now I can get this to hide. I've scrolled some of the answers I've found on SO, but can't get it working. I have to keep the .jumbotron class for css so I simply added an id onto it...........not sure if that's the problem or what....here's my code. I left out the beginning as nobody really needs to see that.
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div>
<div id="second_slide" class="jumbotron" >
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div>
<hr>
<!-- Example row of columns -->
<div class="row-fluid">
<div class="span4">
</div>
</div>
<hr>
<div class="footer">
<p>© Company 2013</p>
</div>
</div> <!-- /container -->
<script>
//doesn't work
$(document).ready(function(){
$('.jumbotron #second_slide').click(function(){
var index=$('.jumbotron #second_slide').index(this);
$('.jumbotron #second_slide').hide();
});
});

It doesn't work because there is no element with an ID of 'second_slide' inside an element with a class of 'jumbotron'.
Try this:
$('.jumbotron#second_slide').hide();

Try this
<div class="jumbotron">
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
<div id="second_slide" class="jumbotron" >
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div></div>

Try
$('#second_slide').click(function(){
var index=$('#second_slide').index(this);
$(this).hide();
});

It looks like the problem is the selector in $('.jumbotron #second_slide'). All you need is the id: $('#second_slide').
$('.jumbotron #second_slide') is trying to find an element with id="second_slide" within the class="jumbotron" divs.

Did you read http://api.jquery.com/category/selectors/ ? Writing something like .clazz #id you actually want to search for the id inside .clazz. You should probably iterate through those jumbotrons and select one you're interested in, then extract that component.

I'll have a go:
$(function(){
$('#second_slide').click(function(){
$(this).hide();
});
});
That's the entire <script> element.