I wonder what I am doing wrong in this case? I got this button which is an HTML element. When I click on it, I want the function push() to get activated. Unfortunally my console says:
ReferenceError: push is not defined
Can some one help me in this case? Thanks so much!
<button type="button" onclick=push()>Click Me!</button>
<script type="text/javascript">
function push (){.....};
</script>
You can change onclick=push() to onclick="push()" to make it work!
Also, there might be something wrong in the body of the push function because of which it is not able to compile - hence, the error.
You could do these instead :
You can do this if you want to use the function push() with only one button,
<button type="button" id="clickme">Click Me!</button>
<script type="text/javascript">
document.getElementById("clickme").addEventListener("click", function() {.....}
</script>
And this if you want to use the function push() with multiple button,
<button type="button" id="clickme">Click Me!</button>
<script type="text/javascript">
document.getElementsByClassName("clickme").addEventListener("click", function() {.....}
</script>
Pros : Less HTML
Cons : More javascript
Related
Hi every one I would like to modify an a Property from a button ease right jajaja
document.getElementById("button_1").style.visibility = "collapse";
But here I have the id from the object I would like to alter but if i don't know specifically the id because the object's come from a loop I should use "this" the JavaScript Keyword right? like "this.id" to get in to the id of the object it call's example
<input type='button' id='button_1' onclick='alert(this.id)' >Click Me!</button>
That will show the id from that element
When I call a Function
<script>
function Funtion_Alert() {
alert (this.id);
}
</script>
<input type='button' id='button_1' onclick='Funtion_Alert(this)' >Click Me!</button>
I get in y the alert undefined I need get the id from the element which is being calling the function
This is not how you pass this. this is special, it's a context of your current function invocation.
Either pass it as an argument, but then you have to call it something else inside the function, like here:
<script>
function Funtion_Alert(element) { // <<< note the argument!
alert(element.id); // <<< note the different name!
}
</script>
<input type='button' id='button_1' onclick='Funtion_Alert(this)' >Click Me!</button>
...or pass it as actual this, by using Function.prototype.call:
<script>
function Funtion_Alert() {
alert(this.id);
}
</script>
<input type='button' id='button_1' onclick='Funtion_Alert.call(this)' >Click Me!</button>
<!-- note the .call -->
Otherwise, the this inside the function will be window as explained here, so this.id will essentially be window.id which is not what you want.
You're also starting an input tag and then closing with a button.
A more idiomatic way of achieving what you're looking for is to addEventListener to the element:
let button = document.getElementById("button_1");
button.addEventListener("click", (e) => alert(e.target.id));
<button id="button_1">Click Me!</button>
You are starting the tag with input field and ending with </button>.
Use this instead, It will work :-)
<button type='button' id='button_1' onclick='alert(this.id)' >Click Me!</button>
I have a button which redirects the user to the previous page:
<button id="back" onclick="location.href='..'">Back</button>
And I want to change his location to two pages before.
What's wrong with this code?
document.getElementById("back").setAttribute("onclick", function(){window.location.href='../../'});
or this
document.getElementById("back").addEventListener("click", "location.href='../../'");
or this
document.getElementById("back").onclick="location.href='../../'";
for some reason none of them work properly and my button remains unchanged... Google doesn't help!
Try
document.getElementById("back").addEventListener("click", function(){
window.location.href='../../';
});
You can do like below
<button id="back" onClick="GoBack()">Back</button>
<script>
function GoBack(){
window.location.href='../../';
}
</script>
And If you want to go back to the previous page you can do like bellow
<button id="back" onClick="GoBack()">Back</button>
<script>
function GoBack(){
window.history.go(-2);
}
</script>
I think this is better
document.querySelector("#back").addEventListener("click", () => window.history.go(-2));
you can use this windows.history.go(-2);:
<button onclick="windows.history.go(-2)">Back</button>
or save address of previous pages and reference to them.
setAttribute for onclick doesn't works in some browsers. Read about it here.
Syntax for addEventListener is
target.addEventListener(type, listener [, options]);
Read about it here
So, Working code
document.getElementById("back").addEventListener("click", function(){
window.location.href='../../';
});
In HTML, I am writing a basic button that calls a function
<button onclick="text('Hello World')">Hello World</button>
<script src="https://pastebin.com/raw/AYp15C6j"></script>
The Pastebin link simply says this
function text(t) {
alert(t);
}
I am wondering if it is possible to call the external link/function in without using the script tag (and not just replacing text('Hello World') with alert('Hello World')), something theoretically like:
<button src="https://pastebin.com/raw/AYp15C6j" onclick="text('Hello World')">Hello World</button>
Thanks!
Here are three ways of adding javascript.
<button onclick="text('Hello World')">Hello World</button>
<script src="https://pastebin.com/raw/AYp15C6j"></script>
<button onclick="text('Hello World')">Hello World</button>
<script>
function text(t) {
alert(t);
}
</script>
<button onclick="text('Hello World'); function text(t) {alert(t);}">Hello World</button>
Click here for more information.
you need a script tag inside html page for a JS Function.
but in the following case you does not need script for JS function.
Example here:
<button src="https://pastebin.com/raw/AYp15C6j" onclick="alert('Hello World');
">Hello World</button>
onclick="alert('Hello World')"
The onclick in your button tag is an attribute that fires on a mouse click on the element and it defines the code that must be executed in that event.
You can define the code to be executed right after the equal sign:
<button onclick="alert('you clicked me')">Click me</button>
But as your code grows in complexity, it'll hardly be one line long, so for readability sake, its advised to place your code inside the script tag:
<button onclick="firesOnClick()">Click me</button>
<script>
var clicks = 0
function firesOnClick() {
clicks = clicks + 1
alert('you clicked me ' + clicks + ' time(s)')
}
</script>
This link has more information about it.
Not sure that it helps, but you can write code in onclick handler, like this:
<button onclick="f=function(t){alert(t);};f('Hello World');">Hello World</button>
or like this:
<button onclick="window[(!![]+'')[3]+'v'+(![]+'')[1]+(![]+'')[2]](atob('YWxlcnQoJ0hlbGxvIFdvcmxkJyk='));">Hello World</button>
I have put the code on jsfiddle.net.
The problem I am having is that the function does not seem to get called when showToast button is clicked.
The actual code
<button type="button" onClick="showAndroidToast('Hello Android!')">Show Toast</button><br/>
function showAndroidToast(name){
alert("hi");
}
I got the error:
ReferenceError: Can't find variable: showAndroidToast;
Anyone help? Thanks!
The problem is that it is not onClick but onclick, and your function should be declared in some cases like this:
<script>
window.showAndroidToast = function(){
//code
};
</script>
<button type="button" onclick="window.showAndroidToast('Hello Android!')">
Show Toast
</button>
This is just to be found globally, just to be sure it is not a problem with the browser itself.
Remove type from your button tag:
<button onClick="showAndroidToast('Hello Android!')">Show Toast</button><br/>
//and check
Hope it helps
Why doesn't this work?
<button onclick = "function(){alert('Hello');}">press me</button>
while this does:
<button onclick = "alert('Hello');">press me</button>
They both work. The first one defines a function, but doesn't call it. The second one actually calls alert.
If you're trying to define and call an anonymous function, try this:
<button onclick = "(function(){alert('Hello');})()">press me</button>
Because you're not calling the function--you're defining it.
I don't know why you would, but you could write this:
<button onclick="(function() { alert('Hello'); })()">press me</button>