Question

我正在尝试解决我的问题，有人可以帮助我吗？我的代码是

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

我试图通过使用下面的HTML来创建表单，该HTML连接到一个变量中，然后在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"/>

有人可以解释为什么我在条件表达式中出现 SyntaxError：missing：。

Answer 1

 this.value ? removeClass();

这是您的三元运算符的开始。

您将this.value作为条件。

然后，将removeClass()作为表达式为真。

然后结束声明。

缺少:和this.value为假时要返回的表达式。

我强烈建议：

完全不使用on*属性
如果您这样做（写一个函数），绝对不要在其中放入长语句。
不使用三元运算作为if语句的通用替代项。它们是针对x = something ? a : b情况设计的。

Answer 2

在您的onblur处理程序中，您已编写：

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

鉴于三元条件运算符;之间有两个语句（用分号? :），这会导致语法错误。

我建议使用<script>块在JS文件或if.. else元素中分别声明模糊事件处理程序，以减轻错误。

Answer 3

我建议重用相同的功能并按如下所示修改代码-这将按预期工作：

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"/>

正在获取：SyntaxError：缺少：条件表达式中的

3 个答案: