Question

我最近花了一些时间与javascript事件监听器一起玩，试图学习更多。但是我有点碰到了路障。

我似乎收到语法错误SyntaxError: expected expression, got keyword 'if'.

问题

如果有人能够详细说明并向我解释我的错误，我会感激不尽。请参阅Js Fiddle，了解我正在尝试完成的更完整的示例。

我尝试使用控制台突出显示的 MDN （This Article Imparticular）进行更多阅读。但是，我无法理解，我的错误以及它与本文的结合方式。

function myFunction() {

  // Text field element.
  var a = document.getElementsByName('field-one')[0];

  // Checkbox element.
  var b = document.getElementById('box-2');

  // Select Element
  var c = document.getElementById('dept');

  // Bind onchange event.
  c.setAttribute('onchange', myFunction()),

  if (b.checked) {
    a.disabled = false;
    a.placeholder = 'Enter Your Full Name.';

  } else {
    a.disabled = true;
    a.placeholder = 'Not Applicable.';
  }

}

function myFunction()

JS FIDDLE

非常感谢任何帮助。

此致

-B。

编辑TUE 4 JULY

我最终完成了重新设计以尝试使事情变得更顺畅。在你们的帮助下，我能够澄清一些事情。

尤其是@Kind User＆amp; amp; @Shaminder S Aujla。

您使用的是逗号而不是分号。

如果要调用该函数，请仅使用该函数的名称。

绑定时不要调用该函数。

像myFunction();一样调用它会抛出“太多的递归错误”。

结果更改如下所示，您还可以看到我完成的小提琴here;

window.addEventListener('load', function() {

  // Select Element
  var c = document.getElementById('dept');
  // Text field element.
  var a = document.getElementsByName('field-one')[0];

  // Bind onchange event.
  c.onchange = function() {

    if (this.options[this.selectedIndex].value == 3) {
      a.disabled = false;
      a.placeholder = 'Enter Your Full Name.';
    } else {
      a.disabled = true;
      a.placeholder = 'Not Applicable.';
    }
  }
})

再次感谢所有人，真的很感激。：）

此致 - B.

Answer 1

您的代码中存在语法错误。这样：

 // Bind onchange event.
  c.setAttribute('onchange', myFunction()),

请改为：

// Bind onchange event.
  c.setAttribute('onchange', myFunction);

此外，在调用函数时，省略关键字函数：所以，这样称呼：

myFunction();

Answer 2

您使用的是逗号而不是分号。
如果要调用该函数，请仅使用函数名称。

绑定时不要调用该函数。

function myFunction() {

   var a = document.getElementsByName('field-one')[0];

   var b = document.getElementById('box-2');

   var c = document.getElementById('dept');

   c.setAttribute('onchange', myFunction);

   if (b.checked) {
     a.disabled = false;
     a.placeholder = 'Enter Your Full Name.';
   } else {
     a.disabled = true;
     a.placeholder = 'Not Applicable.';
 } 

}

myFunction();

function myFunction() {

  // Text field element.
  var a = document.getElementsByName('field-one')[0];

  // Checkbox element.
  var b = document.getElementById('box-2');

  // Select Element
  var c = document.getElementById('dept');

  // Bind onchange event.
  c.setAttribute('onchange', myFunction); // semicolon + don't call it

  if (b.checked) {
    a.disabled = false;
    a.placeholder = 'Enter Your Full Name.';

  } else {
    a.disabled = true;
    a.placeholder = 'Not Applicable.';
  }
}

myFunction(); // call the func

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  margin: 0;
  padding: 0;
}

h3 {
  color: #fff !important;
  padding-left: 0 !important;
}

#txt-field {
  position: relative;
  height: 100vh;
}

#col {
  width: 40%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spacer {
  margin-bottom: .5em;
}

.original {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url(http://imageshack.com/a/img661/3954/bwalqa.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.txt {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  letter-spacing: 4px !important;
  font-size: 26px !important;
  text-transform: uppercase;
  color: #272727;
  padding: .5em;
}

.stretch {
  box-sizing: border-box;
  width: 100%;
}

.shift {
  margin-top: 9%;
}

.boxes {
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  padding: 1.5em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%);
  margin-top: 1.5em;
}


/*Checkboxes styles*/

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  color: #ddd;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child {
  margin-bottom: 0;
}

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #6cc0e5;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.selectpicker {
  margin: 3em 3em;
}

<div id="txt-field" class="original box">

  <select title="Please Select" class="selectpicker" name="dept" id="dept" required="true">
    <option value="">Choose...</option>
    <option value="1">Winter</option>
    <option value="2">Spring</option>
    <option value="3">Summer</option>
    <option value="4" selected="selected">Autumn</option>
  </select>

  <div id="col">

    <h3 class="txt spacer">Dynamic input, based on checkbox state...</h3>
    <input type="text" name="field-one" class="txt stretch" />

    <div class="boxes">
      <input type="checkbox" id="box-2" onChange="myFunction()" checked>
      <label for="box-2">Apply a name?</label>
    </div>
  </div>
</div>

Answer 3

您缺少分号（;）。删除逗号并用分号替换它。看看这个工作fiddle。那应该是

// Bind onchange event.
  c.setAttribute('onchange', myFunction());

并删除最后一行，即

function myFunction（）

修改

删除此行。

c.setAttribute('onchange', myFunction());

最后调用功能

myFunction();

保持内联绑定，即 onchange="myFunction()"

Answer 4

这是更新的小提琴： https://jsfiddle.net/9fzqegso/26/

您至少有2个问题

1）这必须以分号结尾：

不正确：

  c.setAttribute('onchange', myFunction()),

修正：

  c.setAttribute('onchange', myFunction());

2）功能必须有正文：

不正确：

function myFunction()

修正：

function myFunction(){
//future codes here

}

我将这些代码移动到函数（myFunction）中以使其工作：

    // Text field element.
  var a = document.getElementsByName('field-one')[0];


  // Checkbox element.
  var b = document.getElementById('box-2');
    if (b.checked) {
    a.disabled = false;
    a.placeholder = 'Enter Your Full Name.';

  } else {
    a.disabled = true;
    a.placeholder = 'Not Applicable.';
  }

使用JS绑定onchange事件（语法错误）

4 个答案: