My button does nothing when i click on it - javascript

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>

Related

Alternative way to use $(element).on('change', () => {})

I have a problem I hope you can help me:
I'm using bootstrap selectpicker which use the onchange event of the element (I think)
I need to add another event handler to the select element, I did and both works right, the problem is that with every certain changes in my page the table that I use reloads all the data and when that happens the table will add that event handler again to the select element and will do the same thing twice (or more)
So, before assignment of the event I tried to use
$('.selectpicker.call').off('change')
But when I do that I remove the event handler of the bootstrap selectpicker too
Do you guys know any other trick that I could use instead of jquery onchange?
Thank you!
You can use namespaces for the events this way you can distinguish just the events you've added as opposed to other events.
Let's take a very simple example - there is a button with some default functionality (Click me) and we can add more event handlers to it. We also want to clear the event handlers but not break the default functionality:
//assume some code outside our control
$("#clickme").on("click", () => console.log("Default functionality"));
//our code
$("#set_message").on("click", () =>{
const message = $("#message").val();
$("#clickme").on("click", () => console.log(message));
});
$("#clear_message").on("click", () =>{
$("#clickme").off("click");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input id="message" value="add your message here">
<button id="set_message">Set message</button>
<button id="clear_message">Clear message</button>
</div>
<div>
<button id="clickme">Click me</button>
</div>
This doesn't work because the "Clear message" button removes all event handlers - those added by others or not.
Instead, we can namespace events. For example click.myEvent is still a click event but within the myEvent namespace. If we remove click.myEvent it only removes events from that namespace leaving anything else intact. So "Clear message" now only clears our event handlers:
//assume some code outside our control
$("#clickme").on("click", () => console.log("Default functionality"));
//our code
$("#set_message").on("click.myEvent", () =>{
const message = $("#message").val();
$("#clickme").on("click.myEvent", () => console.log(message));
});
$("#clear_message").on("click.myEvent", () =>{
$("#clickme").off("click.myEvent");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input id="message" value="add your message here">
<button id="set_message">Set message</button>
<button id="clear_message">Clear message</button>
</div>
<div>
<button id="clickme">Click me</button>
</div>
Change this $('.selectpicker.call').on('change',function(){....}) to $('body').on('change'','.selectpicker.call',function(){....}) and load this function only once.
What this does is it assigns the function to body and triggers whenever a change event is triggered on .selectpicker.call element. So even if your data keeps changing, this function doesn't.

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);
}

document.queryselector of button in ng-repeat

How can I get the button that was clicked from inside the ng-click function on buttons inside an ng-repeat tag?
I tried setting the id like this:
<button class="btn btn-info ladda-button" type="button"
id={{'check_' + 'file.catModel}}
ng-click="testButton('check_' + file.catModel)"
data-style="expand-left">
<i class="glyphicon glyphicon-check"></i><span class="ladda-label"> Check</span>
</button>
I've tried passing the id to the function then searching with:
angular.element
document.getElementById
but they are always null.
Is it possible to access the button?
You can pass the $event property to your click handler.
So, your code will be re-written as (Omitting other attributes for clarity):
<button ng-click="testButton('check_' + file.catModel, $event)">Check</button>
And in your click handler:
$scope.testButton = function (title, event) {
//event parameter contains all details
//of the button that invoked this handler
};

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')">

Finding the source of a click in event bubbling

I have the following code:
<div id="buttons">
<button id="btn1">1</button>
<button id="btn2">2</button>
</div>
I attach an event handler to the <div> to handle clicks.
When I click a button, the event is captured by the div. Is there a way to get the source of the event?
For example, if the event were on each of the the buttons then the this keyword would refer to the buttons. When it's on the <div> it refers to that.
When the click is caught by the div, is there a way to locate the source of the click? i.e. which actual button was clicked?
Thanks all
Dave
You can use the originalTarget property of the event object to find out the source of the event.
JSFiddle
HTML
<div id="buttons">
<button id="btn1">1</button>
<button id="btn2">2</button>
</div>
JavaScript
document.getElementById('buttons').onclick = function (evt) {
var source = evt.srcElement || evt.originalTarget
alert(source.id);
}
If you use jQuery, this should help:
$("#buttons").click(function(evt){
alert($(evt.target).attr("id"));
});

Categories