Develop Reference

Vanilla Javascript - How can I use mouseup and mousedown on the same button to change and revert a css class value?

I'm a beginner learning to work with vanilla javascript. I have been searching for 2 days, and posting questions in a couple of javascript facebook groups since last night, and I haven't found a solution yet. Maybe I'm not asking the question correctly in my search, but I'm just stuck. If, for some reason, I am bringing up a question that has been answered, I apologize. In my defense, being a beginner sometimes means we are not sure exactly how to search for the answers.
Moving on...
I am trying to figure out how to use 2 eventListeners for the same button to change a css property value. I want function1 to run on mousedown and function2 to run on mouseup. I think my problem is occurring with the (event) parameter. Is there a way to make sure the event parameter in function1 is targeting only the event for mousedown? Then point the event in function2 to use the event for mouseup?
This is what I have so far...
html
<button class="my-btn">My button</button>
<div class="my-class">
some content
</div>
Javascript
let myBtn = document.querySelector('.my-btn');
let myClass = document.querySelector('.my-class');
myBtn.addEventListener('mousedown', function1);
myBtn.addEventListener('mouseup', function2);
function function1(event){
myClass.style.bottom = "-16em";
}
function function2(event){
myClass.style.bottom = "0";
}

Good that you have started to work on Js.
I have created a playground which changes the background color on mouseup and mousedown event. Please visit the below link for the same.
https://jsfiddle.net/kqydbwhL/
Also, I feel like in your code.
myBtn.addEventListener('mousedown', function1);
myBtn.addEventListener('mouseup', function2);
myBtn should be replaced with myClass because you are storing the element into myClass but while listening to the events you are targeting myBtn which is undefined.
Thanks.
I think you updated your code snippet in the problem description.
Here is the new playground url having those changes.
https://jsfiddle.net/6pzhjvfL/17/

After looking at your pen, it seems that position property should be set differently in my-class. Bottom property does not work with static position, which is a default position of all elements.
Maybe you can learn more about bottom property here.
Take a look at this example. I added position:relative to my-class. Try it with position:absolute if that is the result you wanted.

After reviewing the responses here, it was pointed out to me that my code actually works the way I want it to. So I went back to my original project to review. I discovered that I had function2 nested inside `function1' which was not intended. A misplaced curly bracket way down at the bottom of my file, completely out of sight, was the problem. I wasted 2 days looking for an answer to a problem that ended up being a syntax error of my own doing.
Thank you all for your help. I will be careful in the future to keep this from happening again.

Get value upon click event while using AmCharts Map

The Issue:
I have a map made with AmCharts. With some help I was able to make it so upon hover I can display info for each state. I want to make it so that when I click on a state, it displays some of that state info below in a div.
My Jumbled Thoughts:
At first I thought this would require managing the 'state', but I am pretty sure that using 'state' would be overkill. With that said, it seems like it should be a simple issue to have a click event display the same value that I am getting upon hover...but it is apparently too hard for me right now (or too late).
Some Code:
$("#chartdiv").click(function() { // line 641
document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});
Then I thought maybe this would work:
map.addListener("click", function(event){ // line 637
document.getElementById('tempInfo').innerHTML = event.mapObject.infoTitle;
});
Link to Full Code:
http://codepen.io/anon/pen/PGYQxX?editors=0011
Apologies for my Ignorance and Preemptive Expression of Gratitude:
I am working on getting better at basic JS, but at the same time I'm trying to power through things I have a poorer understanding of.
Any help is greatly appreciated, thanks!

There's a event called clickMapObject which you can listen for. It will give you the map object you clicked on as part of the event object you get as parameter.
As it seems like you don't bother to use jQuery, I changed the DOM manipulation to use it. (better readabilty in my opinion)
map.addListener("clickMapObject", function(event){
$('#tempInfo').html(event.mapObject.infoTitle); // Changes with clicking
});
Here's the new codepen.

Want to turn this pop-up effect into a Plug-in

Here's a link to the to my fiddle with the example: http://jsfiddle.net/stavros917/AaQpZ/
So I have put together this effect and pop-up box that can be used for different things through out an application I'm working on with a team. I want this pop-up to be easily used through out the app, so I'm trying to turn it into a custom plug-in that the other devs I work with can use. I would like to be able to pass the function call some different values so that they are not having to re-create the html every time. Looking to do something along the lines of this when I call it:
$('popMe').popUp({
headLine: 'headline text',
buttonOneTxt: 'some text'
buttonOneImg: 'foo.jpg'
buttonTwoTxt: 'some more text'
buttonTwoImg: 'img.jpg'
});
Any help would be awesome! Still pretty new to making plug-in's so I'm a little stuck in how to approach this. I'm sure there are a lot of downloadable one's out there but I genuinely want to learn how it's done. Thanks again!

You just need to wrap everything in a simple command structure of
jQuery.fn.popUp = function () {
I've thrown it all together in a function you can reuse called popUp();. I didn't fix some erroneous calculation errors and re-run misnomers -- those are up to you. goodluck.
http://jsfiddle.net/AaQpZ/1/
EDIT 1
Updated again to allow for dynamic fields to be populated. Please see the fiddle here, and scroll down the script to see how the a function invokes the HTML and passes it as parameters to the popUp() function.
http://jsfiddle.net/AaQpZ/2/
EDIT 2
Sigh...I forgot to stop propagation and it was having appending issues on the close/enter functions. New code updated to stopPropagation() added...
http://jsfiddle.net/AaQpZ/3/

Div with a jQuery click event bound to it is not firing when clicked?

It could be a rookie mistake, but I've gone over my code enough times doing things such as; pre-pending .select-delete with div, attempted to use document.write("Hello") to see if the event was firing or not.
Here's a link to my jsFiddle: http://jsfiddle.net/gPF8X/5/
I really have no idea what's going on :(.
Any help would be greatly appreciated!
Edit: Linked to the incorrect JSFiddle, relinked to the correct one.

There is no - in your div class name.
<div id="1" class="selectdelete"></div>
$('.select-delete').click( function() {
Got it - id needs to be wrapped in quotes.
var value = $(this).attr('id');

The trigger is firing, but your code is not running because of an error - you're not quoting the string 'id' so it's an undefined value. Use your browser's debugger tool - it will help for this sort of thing.
Beyond that though, I can't say anything further because it's not clear what the desired result is.
Edit There's another issue as well - the selector is not working. You can't use the [ and ] character unquoted inside a jQuery comparison like that. The simplest solution is just not to have those characters in your input names. But you can also use escaping like so: $('select[name=g_country\\['+value+'\\]]').

I know you already accepted my other answer, but I just want to add for the record that there is another way to do it. Specifically, this seems like one of those cases where jQuery is less helpful rather than more. What I would do is change your HTML so the element names were also given as IDs, and then write it like so:
document.getElementById('g_country['+value+']').disabled = true;
document.getElementById('g_url['+value+']').disabled = true;

Can this snippet of Javascript be simplified more with jQuery?

I have the following snippet of Javascript, which is just attaching an onclick to a button and then updating the text of an em tag underneath it. I'm slowly trying to educate myself and work with jQuery more as I've found to like the syntax a lot more and for some tasks, it's more of a pleasure to work with.
Some of the best examples I've found have come from Stackoverflow, so I come once again, to see how this could refactored and improved with jQuery; any thoughts?
$$('em.green').each(function(em) {
em.up('button').onclick = function() {
em.update('Saving...')
};
});
Thanks!

Try this, little bit shorter:
$('button').click(function(i, button) {
$(button).closest('em.green').html('Saving...');
});
Saves you from having to loop through every EM and then bind the onclick. Might also help to add a class to the button so you're not binding to every button on the page, just in case there are others.

Here is a line by line translation from your prototype code. Not a lot different:
$('em.green').each(function(i, em) {
$(em).closest('button').click(function() {
$(em).html('Saving...')
})
});
IMO the prototype version looks just as nice if not nicer (without $ sprinkled everywhere).

This is a little shorter and might be easier to understand, but duplicates the "em.green" selector.
$('button:has(em.green)').click(function() {
$(this).find('em.green').html('Saving...');
});
crescentfresh's answer is also good, and doesn't need search for the em element each time. The performance impact shouldn't be noticeable though, since you probably don't have a huge tree of elements under the button.

Matthew Crumley's answer is good but why attach multiple handlers when one will do.
The added advantage is that this will also work if you create any em.green elements later in the lifespan of the document.
$('button:has(em.green)').live('click', function(){
$(this).find('em.green').html('Saving...')
});

(I can't edit, so I'll have to create a new answer but:)
Slightly shorter:
$('button').click(function() {
$(this).closest('em.green').html('Saving...');
});
Saves you from having to loop through every EM and then bind the onclick. Might also help to add a class to the button so you're not binding to every button on the page, just in case there are others.
It's unnecessary to include the function parameters, use the this variable to specify the context you want to find the closest parent of.