Using "if/else" with OnClick

Question

First of all, is it even possible to write if/else statements directly in html with onclick attribute? And if so, why is my code not working?

So this is a button. The "Calc.Input.value" refers to a text input and I want to display an error message if that field is 0 or blank. In all other cases I want some other things to happen as you can see. This is not relevant though, as everything after the "else" worked fine before.

<INPUT TYPE="button" NAME="drop" id="dropbutton" style="background-color:#D1E8D5;" VALUE="
Släpp ankare " OnClick="if ("Calc.Input.value == ''" || "Calc.Input.value == '0'")
{window.alert("Please enter a number");} else 
{document.getElementById('dropbutton').value=' Justera 
längd ';document.getElementById('length').innerHTML =
Calc.Input.value;document.getElementById('dropbutton').style.cssText = 'background-
color:#FFF6B3;';}">

Oy...Even if it would work (which it doesn't), that doesn't look too pretty. :/ Why don't you just have a function call in the onclick and perform the conditional expressions within the function? — Lix
– Lix, Commented Mar 12, 2013 at 19:37
The Obtrusiveness burns my eyes!!! This is NOT how good JavaScript should be written — David L
– David L, Commented Mar 12, 2013 at 19:39
The if ("Calc.Input.value == ''" || "Calc.Input.value == '0'") line is strange … — Kijewski
– Kijewski, Commented Mar 12, 2013 at 19:41

Kijewski · Accepted Answer · 2013-03-12 19:46:45Z

23

Just DON'T put it in the onclick attribute.

Use

<INPUT TYPE="button" NAME="drop" id="dropbutton" style="background-color:#D1E8D5;" VALUE="Släpp ankare ">
<script>
document.getElementById('dropbutton').onclick = function() {
    if (Calc.Input.value == '' || Calc.Input.value == '0') {
         window.alert("Please enter a number");
    } else {
        document.getElementById('dropbutton').value=' Justera längd ';
        document.getElementById('length').innerHTML = Calc.Input.value;
        document.getElementById('dropbutton').style.backgroundColor = '#FFF6B3';
    }
    return false;
}
</script>

edited Mar 12, 2013 at 19:46

answered Mar 12, 2013 at 19:39

Kijewski

26.1k14 gold badges108 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Niet the Dark Absol Over a year ago

The extra quotes in the if statement are obviously not supposed to be there.

Lix Over a year ago

I'd go so far as to suggest leaving the reurn false inside the function scope as well...

NollProcent Over a year ago

I will retreat to my chambers for some wallowing in shame...but thank you, this works like a charm :-)

Amy · Accepted Answer · 2013-03-12 19:40:05Z

4

The reason your code is not working is because you need to escape your " quotation marks, otherwise it will be interpreted as the HTML attribute symbol.

And I agree with the others, it is a bad practice to write your JavaScript inline inside your HTML.

answered Mar 12, 2013 at 19:40

Amy

7,5262 gold badges22 silver badges31 bronze badges

Comments

washicd · Accepted Answer · 2015-01-01 03:56:07Z

2

sweetamylase's reply is best but you may also consider:

If your onclick= assignment is enclosed in double quotes (onclick="...") then try using only single quote characters inside of those double quotes (or vice versa).

This can make things easier when you need to make assignments to the onclick event when inserting elements dynamically and having separate script functions isn't really a good option.

Example:

<button onclick="alert('Do this'+' and that')">Press This</button>

answered Jan 1, 2015 at 3:56

washicd

912 silver badges3 bronze badges

Comments

klidifia · Accepted Answer · 2015-08-19 21:14:11Z

2

Hmm but how about for something like this:

<a href="#" onclick="if (a_function_to_get_language() == 'en') {
    alert('Some message');
}
else {
    alert('Some message in a different language');
}">Action</a>

answered Aug 19, 2015 at 21:14

klidifia

1,5051 gold badge13 silver badges18 bronze badges

Comments

user7850612 · Accepted Answer · 2017-04-11 12:19:14Z

0

Alert on nav page

           <script>
              function myFunction() {
            alert("You Are Not Signed In!");
                   }
                 </script>

answered Apr 11, 2017 at 12:19

user7850612

1

Collectives™ on Stack Overflow

Using "if/else" with OnClick

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related