Multiple On-click Events HTML Button

Question

I'm simply trying to create an HTML button that has two onclick events, but the issue is that the second one is not responding properly. Here is the button tag below:

<input class="btn btn-default btn-responsive" type="button" onclick="return confirm('Cancel Changes?'); location.href='${cancelLink}'" value="Cancel Changes"/>

I must be doing something incorrectly due to the expression language in location.href, but I'm not sure what it is since I'm very unfamiliar with using expression language in these instances. I do know that this link is working though, because if I use it in an 'a' tag with an href=${cancelLink}, it works. Any help would be appreciated.

score 0 · Answer 1 · answered Jun 29 '20 at 16:42

You don't have multiple onclick events unless you click the button multiple times.

You have one click event listener which has two statements in it.

This is the function you are using:

function () {
    return confirm('Cancel Changes?');
    location.href='${cancelLink}'
}

The first line has a return statement in it, so you never reach the second line.

If you want to conditionally do something, then use an if statement, not a return statement:

function () {
    if (confirm('Cancel Changes?')) {
        location.href='${cancelLink}'
    }
}

However, all you are doing here is using JavaScript to simulate a regular link: So you should use a regular link:

<a class="btn btn-default btn-responsive" 
   onclick="return !confirm('Cancel Changes?')"
   href="${cancelLink}">
       Cancel Changes
</a>

score 0 · Answer 2 · answered Jun 29 '20 at 16:47

<body>

<input class="btn btn-default btn-responsive" type="button" onclick="Click()" value="Cancel Changes"/>

<script>
    
    
    function Click(){ confirm("cancel changes"); }
    

</script>

</body>

Function should be written sperately in JavaScript tag

Multiple On-click Events HTML Button

2 Answers2