We Keep Coding

Get unique data about clicked button in Phonegap

I have my simple Phonegap app, which is based on tabbed layout. On one of these tabs I have list of tags (more than one). All of these have buttons to edit and delete. Its like this:
<div class="tag-buttons" uid="TAG_ID">
<button class="edit-tag btn btn-default btn-sm">Edit</button>
<button id="aaa" class="remove-tag btn btn-danger btn-sm" onclick="removeTag()">Remove</button>
</div>
Now I want do handle this removeTag() function. So I have in my JS file this function:
function removeTag()
{
//controller.removeTag($(this).parent().attr("uid"));
console.log($(this));
}
Console.log and commented line are only samples. I want to know which button was clicked (I need uid value). All of buttons have this same class. $(this) is returning Window object.
Any ideas?

I had made stupid error. Now everything is working.
I had to change onclick="removeTag()" to onclick="removeTag(this)" and then in JS function was quite good. I changed function declaration to use additional argument like this:
function removeTag(button)
{
var id = $(button).parent().parent().attr("uid");
controller.popTag(id);
}

My button does nothing when i click on it

I have a button
<script>
function changeMap() {
container.setMap(oMap);
}
</script>
<button onClick="changeMap"> Click here </button>
The content of container is correct. it has a control.
The set Map property exists from what i see in the console.
When the page loads all is correct. but when i click the button the property doesn't set OR the content of the page doesn't change.
Do i need to load some other way? Thank you in advance :)

Change your HTML to this:
<button onclick="changeMap()">Click here</button>

The attribute is called onclick not onClick, Apparently html attributes are fully case insensitive, so both will work.
However you also need parentheses after the name of the function.
<button onclick="changeMap(event)">Click Here</button>
here the event is a browser global that allows us to pass an event to the handler. In your case, you aren't using the event, so it is not necessary.
Please also note that if you add the event in javascript, you will not use the parentheses.
I have included a demo of three different ways to add a click handler to a button below.
function log(message){
var line = document.createElement('div');
var text = document.createTextNode(message);
line.appendChild(text);
messages.appendChild(line);
}
function handleClick(e){
log("Click from " + e.target.id);
}
// add an event listener to b2
b3.onclick = handleClick;
// add an event listener to b3
b4.addEventListener('click', handleClick);
<button onclick="handleClick(event);" id="b1" >Button 1</button>
<button onClick="handleClick(event);" id="b2" >Button 2</button>
<button id="b3">Button 3</button>
<button id="b4">Button 4</button>
<div id="messages">
</div>

How to change dynamic HTML button onClick event with Javascript

I have codes :
HTML :
<div class="modal-footer" >
<button type="button" class="btn btn-sm btn-default" id="mybutton" style="background-color: #367E2D; color:white; opacity: 1" onclick="chooseme();">OK</button>
</div>
Javascript :
('#mybutton').click(chooseme('123'));
Purpose :
I want to change onClick event from chooseme() to chooseme('123') using Javascript
And the result of the code above is :
chooseme('123') executed immediately (not when the button clicked)
Question is : Anyone can explain what's wrong with my code? and what is
the correct implementation to reach the purpose above?

I assume from the syntax that you're using jQuery. When binding events to named functions in JS, you need to pass the function itself to the callback. With your current syntax, you're passing the return value from chooseme() to the click handler. As a result, the function is called immediately on page load.
Wrap the hander inside an anonymous function, and you're good to go:
$('#mybutton').on('click', function() { chooseme('123') });

toggle class on ul to change font

I'm very new to javascript & jQuery and I'm having trouble with toggling a class when a button is clicked. The desired output is to have the user add items as they click a button. That works fine. However when they want to check an item off their list, I can't get the font to change to be strike-through when the user clicks the button that is inside the <li>.
I think I'm close but there's something amiss.
Any help is appreciated.
CODE:
function checkItem(element) {
// toggles the class shopping-item__checked when button inside the parent <li> is clicked
element.parent('li').toggleClass('.shopping-item__checked');
console.log(element);
}
// Event listeners
$(document).ready(function () {
console.log("ready!");
$('#js-shopping-list-form').submit(function (event) {
event.preventDefault();
addItem(state, $('#shopping-list-entry').val());
renderList(state, $('.shopping-list'));
});
$('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item')));
});
HTML:
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<span class="button-label">check</span>
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>

remove the '.' from the toggleclass,
function checkItem(element) {
// toggles the class shopping-item__checked when button inside the parent <li> is clicked
element.parent('li').toggleClass('shopping-item__checked');
console.log(element);
}
also u can try the following as alternative
function checkItem(element) {
// toggles the class shopping-item__checked when button inside the parent <li> is clicked
if(element.parent('li').hasClass('shopping-item__checked')){
element.parent('li').removeClass('shopping-item__checked');
}else{
element.parent('li').addClass('shopping-item__checked');
}
console.log(element);
}

You are binding event handlers the wrong way.
$('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item')));
You need to pass the event information in the following manner.
function checkItem(event) {
//event information is passed. target contains the target element on which the event was fired. in this case the check button
var element = $(event.target);
// toggles the class shopping-item__checked when button inside the parent <li> is clicked
//element.parent('li').toggleClass('.shopping-item__checked');
element.closest('li').find('span.shopping-item').css('text-decoration','line-through');
console.log(element);
}
// Event listeners
$(document).ready(function () {
console.log("ready!");
$('#js-shopping-list-form').submit(function (event) {
event.preventDefault();
addItem(state, $('#shopping-list-entry').val());
renderList(state, $('.shopping-list'));
});
//bind each check button with the check item function
$('ul.shopping-list > li > div.shopping-item-controls > button.shopping-item-toggle').on('click', {event_data:this}, checkItem);
});
and modify your html to remove the span inside the button, coz it it's unecessary.
<div class="container">
<h1>Shopping List</h1>
<form id="js-shopping-list-form">
<label for="shopping-list-entry">Add an item</label>
<input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
<button type="submit">Add item</button>
</form>
<ul class="shopping-list">
<li>
<span class="shopping-item">apples</span>
<div class="shopping-item-controls">
<button class="shopping-item-toggle">
<!--<span class="button-label">check</span>-->
<!-- recommend not to use the span, since you will not be able to capture click event of button -->
check
</button>
<button class="shopping-item-delete">
<span class="button-label">delete</span>
</button>
</div>
</li>
the .closest() method finds the closest matching ancestor, while the .find() method finds the closest matching child.
https://coderwall.com/p/wxjljq/jquery-find-and-closest-are-your-best-friends

First things first you are adding the callback function wrong for the jQuery click event.
$('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item')));
You are actually passing in undefined as a callback function because you are calling checkItem() right away and that function returns nothing. So everytime you click on the li elements they do nothing.
Lets fix that by just adding in the function name without any paranthesis. So we are not calling it we are just passing it through as a parameter.
$('ul.shopping-list > li .shopping-item-toggle').click(checkItem);
I have also targeted the check button for the click in this example. Now everytime the button is clicked it will call checkItem and pass in an event object like so: checkItem(event);
Looking at your checkItem function it is expecting an element to be passed through, well lets change that part:
function checkItem(event) {
// toggles the class shopping-item__checked when button inside the parent <li> is clicked
$(this).closest('li').toggleClass('shopping-item__checked');
console.log(this);
}
I changed a few things here. I changed the parameter name from element to event and I changed element.parent('li').blah.blah to $(this).closest('li').blah.blah
this is going to represent the element clicked and I wrap it in a jquery selector so I can chain some stuff to it like the closest and toggleClass methods.
Now I noticed that this is going to work for the first element but its not going to work for elements that you add later. This is because you would have to add a click event to the new list item everytime you call addItem. There is an easier way to do that and it would require us to modify how we add the click event in the first place.
$('ul.shopping-list').on('click', 'li .shopping-item-toggle', checkItem);
This technique that we are using now is called Event Delagation. Now I am actually adding the click event on the entire shopping list and its going fire on all li .shopping-item-toggle items that were clicked inside the shopping list. This means the elements don't yet need to be added at this point for them to have a click event work on it. They can be added later and it will still work. Now when you add new items you can click on them and they will have the click event fire.

javascript - remove element

My question is rather elementary, but I do not understand why, in the following code, on button click only button dissapears, instead of the whole div:
<script>
function remove(id) {
//get the element node
element = document.getElementById(id);
//remove the element from the document
document.removeChild(element);
}
</script>
<div id="intro" class="jumbotron">
<h1>Your Offline Web Dictionary!</h1>
<p class="lead">
<div class="controls">
<input class="span7 " type="text" placeholder=" " name="key">
</div>
<div>
<button class="btn btn-large btn-success" onclick="remove(intro)">
Dictionary Search
</button>
</div>
</div>
JSFiddle

The problem is that the button element has a remove property so that is called instead of your remove function. And also the string thing.
<button class="btn btn-large btn-success" onclick="window.remove('intro');console.log(this.remove);">
Search
</button>
http://jsfiddle.net/HMEVd/76/

Two problems. Firstly, intro should be a string, not an identifier, so use remove('intro') in your onclick.
Second, document.rwmoveChild is incorrect. removeChild should be called on the parent of the element you are removing. It is common to use:
element.parentNode.removeChild(element);

intro should be sent to the function as a string rather than a variable, i.e, 'intro'
Also, you must rename your function, for example, removeById instead of remove. Then it works perfectly.
The function remove actually does something completely different. (Your function is not even invoked when it is named remove as you can see by putting an alert message into it.)
function removeById(id) {
//get the element node
element = document.getElementById(id);
//remove the element from the document
document.removeChild(element);
}
...
<button class="btn btn-large btn-success" onclick="removeById('intro')">