javascript - new function in onclick - Stack Overflow

admin管理员组

文章数量:1352150

EDIT: Just an example. I need support for if/else

I want to do this:

<button onclick="function() {alert('Hi!');prompt('What can I do for you?', 'make a Sandwich');}">Hello World!</button>

Apparently this doesn't work.

Do you know how I could do this?

How can I "call" a new function?

I cannot simply define it in a <script></script>-node.

EDIT: Just an example. I need support for if/else

I want to do this:

<button onclick="function() {alert('Hi!');prompt('What can I do for you?', 'make a Sandwich');}">Hello World!</button>

Apparently this doesn't work.

Do you know how I could do this?

How can I "call" a new function?

I cannot simply define it in a <script></script>-node.

• javascript
• html
• button
• onclick

Share Improve this question Follow edited Apr 21, 2018 at 9:58 Narendra Jadhav 10.3k1515 gold badges3434 silver badges4444 bronze badges asked Jun 30, 2015 at 5:50 000000000000000000000000000000000000000000 1,46711 gold badge1919 silver badges4040 bronze badges 2

• see the answer ,support for if-else included – user4039781 Commented Jun 30, 2015 at 6:16
• You can use if...else in any function as normally – Tushar Commented Jun 30, 2015 at 6:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You don't need a function to call. You can directly use Javascript code. This is considered bad practice.

<button onclick="alert('Hi!'); prompt('What can I do for you?','make a Sandwich');">
    Hello World!
</button>

Demo

You can also use function as event handler as follow:

HTML

<button onclick="fnHandler();">
    Hello World!
</button>

Javascript

function fnHandler() {
    alert('Hi!');
    prompt('What can I do for you?','make a Sandwich');
}

Demo

Using addEventListener you can bind events from javascript instead of inline in the HTML(Remended):

HTML

<button id="myButton">
    Hello World!
</button>

Javascript

document.getElementById('myButton').addEventListener('click', function() {
    alert('Hi!');
    prompt('What can I do for you?','make a Sandwich');
});

Demo

It is not remended to write the functions inside the parameter. It is better to write them on a separate function and then link it with one of the methods listened above. You can still do what you said in the example by using the anonimous function like this:

<button onclick='(function(){
    alert("hello world");
    prompt("I am the Doctor","oh yeah");
})()'></button>

Updated version for general function because add listner adds uniqueness for click

<button onclick="function_name() id="button">Some Text</button>

Now to write the function definition in js

function function_name(){ .... statements; }

A typical example using this with if-else

<script>
document.getElementById('button').onclick = function() {
    if (Calc.Input.value == '' || Calc.Input.value == '0') {
         window.alert("Please enter a number");
    } else {
        document.getElementById('button').value=' Justera längd ';
        
    }
    return false;
}
</script>

本文标签： javascriptnew function in onclickStack Overflow