onclick 中的新功能

Question

编辑：只是一个例子。我需要对 if/else 的支持

我想这样做：

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

显然这不起作用。

你知道我该怎么做吗？

如何“调用”一个新函数？

我不能简单地在<script></script>-node 中定义它。

Answer 1

您无需function 即可拨打电话。您可以直接使用 Javascript 代码。这被认为是不好的做法。

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

Demo

您也可以使用function 作为事件处理程序，如下所示：

HTML

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

Javascript

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

Demo

使用addEventListener，您可以从 javascript 中绑定事件，而不是在 HTML 中内联（推荐）：

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

Answer 2

不建议将函数写在参数里面。最好将它们写在一个单独的函数上，然后将它与上面听过的方法之一链接起来。您仍然可以通过使用这样的匿名函数来执行示例中所说的操作：

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

Answer 3

一般功能的更新版本，因为添加列表器增加了点击的唯一性

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

现在在js中编写函数定义

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

使用 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>