Getting: SyntaxError: missing : in conditional expression

Question

I am trying to resolve My issue can some one help me ? My code are

let addClass = (obj) => {obj.classList.add('active-input');}
let removeClass = (obj) => {obj.classList.remove('active-input');}

I am trying to create a form by using below HTML which is concatenating in a variable and then I am updating it on DOM.

<input class="inputFull" list="ozip" id="orZip" name="OrZip" onfocus="addClass(this);this.placeholder=\'\';document.getElementById(\'orTitle\').style.display =\'block\';" onblur="this.value ? removeClass(this);document.getElementById(\'orTitle\').style.display =\'block\'; : document.getElementById(\'orTitle\').style.display =\'none\';this.placeholder=\'Origin postal code\'" placeholder="Origin postal code" autocomplete="off"/>

Can someone explain why I am getting SyntaxError: missing : in conditional expression.

don't do this `onblur="this.value ? removeClass();document.getElementById(\'orTitle\').style.display =\'block\'; : document.getElementById(\'orTitle\').style.display =\'none\';this.placeholder=\'Origin postal code\'"` use a function and call it — Liam, Mar 07 '19 at 12:59
Please check this: https://stackoverflow.com/questions/6259982/how-do-you-use-the-conditional-operator-in-javascript You shuold swap a `;` for a `:` — Leonardo Alves Machado, Mar 07 '19 at 12:59
@LeonardoAlvesMachado Reread the question and you'll see it is not what cause the error. Also, both answers make that clear. — Asons, Mar 07 '19 at 13:05
@LGSon true. I've made a real quick look and found a `;` on the first part of the ternary operator and assumed that the error was just it - and if it wasn't, he could figure it out by himself. Anyway, [the link I've posted](https://stackoverflow.com/questions/6259982/how-do-you-use-the-conditional-operator-in-javascript) is a reference to create ternary operators - which is better than just fixing an expression in my opinion. — Leonardo Alves Machado, Mar 07 '19 at 13:19

score 2 · Accepted Answer · answered Mar 07 '19 at 13:00

 this.value ? removeClass();

Here is the start of your ternary operator.

You have this.value as the condition.

Then you have removeClass() as the expression if it is true.

Then you end the statement.

The : and expression to return if this.value is falsy is missing.

I strongly suggest:

Not using on* attributes at all
Definitely not putting long strings of statements in them if you do (write a function)
Not using ternary operations as general substitutes for if statements. They are designed for cases of x = something ? a : b.

score 2 · Answer 2 · answered Mar 07 '19 at 13:02

In your onblur handler, you've written:

onblur="this.value 
        ? 
        removeClass(this);
        document.getElementById(\'orTitle\').style.display =\'block\'; 
        : 
        document.getElementById(\'orTitle\').style.display =\'none\';
        this.placeholder=\'Origin postal code\'"

Given that there are two statements (with semicolon ;) between the ternary conditional operator ? : it is causing a syntax error.

I would suggest separately declaring the blur event handler in a JS file or a <script> element using if.. else blocks to mitigate the error.

score 0 · Answer 3 · answered Mar 07 '19 at 13:10

I suggest to reuse same function and modify the code as below - This will work as you expect:

let toggleClass = (obj) => {
  if(obj.value) {
   obj.classList.remove('active-input')
   document.getElementById("orTitle").style.display = "block";
  } else {
   obj.classList.add('active-input');
   document.getElementById("orTitle").style.display = "none";
   obj.placeholder = "Origin postal code";
  }
}

<input class="inputFull" list="ozip" id="orZip" name="OrZip" onfocus="toggleClass(this)" onblur="toggleClass(this)" placeholder="Origin postal code" autocomplete="off"/>

Getting: SyntaxError: missing : in conditional expression

3 Answers3